1. Users enter the URL, the browser initiates a DNS query requests
System cache - if needed record is not found in the browser cache, the browser will make a system call (windows in a gethostbyname). In this way you can get the recording system cache.
Router cache - and then, in front of the queries sent to the router, which generally have their own DNS cache.
ISP DNS cache - then have to check the ISP is caching DNS server. In general this can be found in the corresponding cache records.
Recursive search - Your ISP's DNS servers from domain name server with a recursive search starts from the .com top-level domain servers to Facebook's domain name server. General caching DNS server will have .com domain name server in the domain name, so the matching process to the top server is not so necessary.
|
1
2
3
4
5
6
7
|
GET http:
//www.cricode.com/ HTTP/1.1
Host: www.cricode.com
Connection: keep-alive
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
|
Web server usually listens on port 80, to get the client's HTTP request. After you create a TCP connection with the client, web server begins accepting data sent from the client, via HTTP and decoding, parsing the request url information before other information such as Accept-Encoding, Accept-Language and other data received from the network in . Web server according to the HTTP request header to obtain the response data returned to the client. A typical HTTP response header data packet as follows:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
HTTP/1.1 200 OK
Date: Fri, 24 Oct 2014 13:55:18 GMT
Server: Apache
X-Powered-By: PHP/5.4.32
Keep-Alive: timeout=5, max=10000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
a0f6
<</span>!DOCTYPE HTML>
<</span>html>
<</span>head>
<</span>meta charset=
"UTF-8"
>
<</span>meta http-equiv=
"X-UA-Compatible"
content=
"IE=10,IE=9,IE=8"
>
<</span>meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
>
<</span>title><</span>/title>
<</span>body
class
=
"home"
><</span>/body>
<</span>/html>
|
At this point, a HTTP communication process is completed. the web server from the HTTP Connection request header field value to decide whether to close the TCP link channel, when the field value Connection keep-alive, web server does not close the connection immediately. (This step is a beginning and maybe there will redirect the browser follows the redirect address, etc.).
5, the browser parses http response
(1) html document analysis (DOM Tree)
When the browser does not accept all the complete HTML document, it has begun to show up on this page. I.e. dom tree parse tree is generated, by the elements and attributes dom nodes, the root of the tree is a document object.
(2) the browser sends the acquired object is embedded in HTML
Loads encountered during an external css file, the browser sends a request to another, to get the css file. Picture resource encountered, the browser will send a request to another to get the picture resources. This is an asynchronous request, and does not affect the html file to load.
But when the document loads encountered during js files, html files hang rendering (rendering loading resolve synchronization) threads, only to wait for the document is loaded js file, have to wait for parsing is finished, it can be restored to render html document thread.
(3) css parsing (parser Render Tree)
Css browser to download files, css files will parse the style sheet object and used to render dom tree. The object contains css rules, which contain selector and declaration objects.
Css traversal order of the elements, is traverse up the tree from the lower end.
(4) js parsing
Browser UI thread: single thread, most browsers (such as chrome) were used to make a single-threaded execution javascrip and update the user interface.
js blocking page: browser http requests are blocked generally caused by a js, the specific reasons for js files after the download is complete will be executed immediately, while the other acts js execution time will clog the browser, there is no period of time network request is processed, the http request after this time will be followed by the implementation of, this idle time is called the http request is blocked.
js blocking reason: The reason why block the UI thread of execution, because js can control the display of the UI, and the rules page load is to execute the order, so the encounter js code when the UI thread will first execute it
1. Users enter the URL, the browser initiates a DNS query requests
System cache - if needed record is not found in the browser cache, the browser will make a system call (windows in a gethostbyname). In this way you can get the recording system cache.
Router cache - and then, in front of the queries sent to the router, which generally have their own DNS cache.
ISP DNS cache - then have to check the ISP is caching DNS server. In general this can be found in the corresponding cache records.
Recursive search - Your ISP's DNS servers from domain name server with a recursive search starts from the .com top-level domain servers to Facebook's domain name server. General caching DNS server will have .com domain name server in the domain name, so the matching process to the top server is not so necessary.
|
1
2
3
4
5
6
7
|
GET http:
//www.cricode.com/ HTTP/1.1
Host: www.cricode.com
Connection: keep-alive
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
|
Web server usually listens on port 80, to get the client's HTTP request. After you create a TCP connection with the client, web server begins accepting data sent from the client, via HTTP and decoding, parsing the request url information before other information such as Accept-Encoding, Accept-Language and other data received from the network in . Web server according to the HTTP request header to obtain the response data returned to the client. A typical HTTP response header data packet as follows:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
HTTP/1.1 200 OK
Date: Fri, 24 Oct 2014 13:55:18 GMT
Server: Apache
X-Powered-By: PHP/5.4.32
Keep-Alive: timeout=5, max=10000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
a0f6
<</span>!DOCTYPE HTML>
<</span>html>
<</span>head>
<</span>meta charset=
"UTF-8"
>
<</span>meta http-equiv=
"X-UA-Compatible"
content=
"IE=10,IE=9,IE=8"
>
<</span>meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
>
<</span>title><</span>/title>
<</span>body
class
=
"home"
><</span>/body>
<</span>/html>
|
At this point, a HTTP communication process is completed. the web server from the HTTP Connection request header field value to decide whether to close the TCP link channel, when the field value Connection keep-alive, web server does not close the connection immediately. (This step is a beginning and maybe there will redirect the browser follows the redirect address, etc.).
5, the browser parses http response
(1) html document analysis (DOM Tree)
在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了。生成解析树即dom树，是由dom元素及属性节点组成，树的根是document对象。
（2）浏览器发送获取嵌入在HTML中的对象
加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载。
但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。
（3）css解析（parser Render Tree）
浏览器下载css文件，将css文件解析为样式表对象，并用来渲染dom tree。该对象包含css规则，该规则包含选择器和声明对象。
css元素遍历的顺序，是从树的低端向上遍历。
（4）js解析
浏览器UI线程：单线程，大多数浏览器（比如chrome）让一个单线程共用于执行javascrip和更新用户界面。
js阻塞页面：浏览器里的http请求被阻塞一般都是由js所引起，具体原因是js文件在下载完毕之后会立即执行，而js执行时候会阻塞浏览器的其他行为，有一段时间是没有网络请求被处理的，这段时间过后http请求才会接着执行，这段空闲时间就是所谓的http请求被阻塞。
js阻塞原因：之所以会阻塞UI线程的执行，是因为js能控制UI的展示，而页面加载的规则是要顺序执行，所以在碰到js代码时候UI线程会首先执行它