Enter the URL to the page from the show

When we enter the URL and press Enter, the browser will URL is being examined, first determine URL format, such as a ftp http ed2k and so, here we assume that this URL is http://hellocassie.cn , then the browser will the URL for security checks, and then the browser will first see the kernel cache, and then decide whether to initiate a request to the download page, or get the page from the cache, if it is the first visit, this time has not been cached, it will initiate a network server whereabouts request.

clipboard.png

Download Page

First we have to determine the network address of the server, the request can be sent to it, so put this URL into corresponding IP address, the browser will be followed by a recursive query from the browser cache, system cache, the router cache, local DNS server If there is no local DNS server IP address corresponding to the record, this time it will send the request to the 13 root name servers, root name server receives the request will determine who is authorized to manage the domain name, and then return to a responsible IP a top-level domain servers. After the local DNS server receives IP information, go to link top-level domain servers. After top-level domain name server receives a request, if they can not be resolved, then return to the next level domain name server's IP, for such an iterative query, until the sub-domain name server.

clipboard.png

这个时候有两种情况,第一种是子域名服务器返回了这个URL对应的IP地址,第二种情况是经过了CDN调度,如果目标网站使用了CDN服务,则需要在CDN服务商的平台设置相应的CNAME记录,这个记录是CDN服务厂商的一个DNS服务器的域名,子域名服务器会返回这个CNAME记录,本地DNS服务器得到这个记录后,会向CDN服务厂商的DNS服务器查询,然后CDN服务厂商的DNS服务器返回CDN服务厂商的一台GSLB设备(全局负载均衡设备)的IP,本地DNS服务器携带自身的IP地址和要查询的域名向GSLB设备发起请求,GSLB设备根据IP,以及要查询的域名,选择一台用户所属区域的区域负载均衡设备,区域负载均衡设备根据一定的算法和策略,会向GSLB设备返回一个最适合的CDN节点的IP地址,比如说返回一个距离用户最近的CDN节点,因为CDN服务器缓存了网站的源服务器的数据,而且会像源服务器一样,响应用户的请求. 而且它离用户更近,所以能获得更快的响应速度。最后本地DNS服务器拿到这个CDN节点的IP地址。

clipboard.png

得到IP后,会建立TCP连接,如果是https开头的URL,还会建立SSL连接,进行一个请求证书,生成对话密钥的过程。
然后开始进行HTTP请求,浏览器会先生成一个HTTP数据包,包含这次请求的信息,主要是请求方法、请求的说明和请求附带的数据,这个HTTP数据包经过传输层,头部加入双方的端口信息,被封装成一个TCP数据包,然后经过网络层,头部加入双方的IP地址信息,被封装成一个IP数据包,然后经过数据链路层,头部设置双方的MAC地址,封装成以太网数据包,最后变成二进制数据,传送到服务器。

clipboard.png

clipboard.png

clipboard.png

然后服务器作出响应,返回一个HTTP报文给浏览器,这个HTTP报文包含了状态行,消息报头,消息正文(就是HTML)。

缓存获取页面

Then we look at the second case, if there is a local cache, the browser will first determine if the cache has expired, through Expires and Cache-Control field to determine whether to force a cache hit, the server returns the request Expires result cache expiration time, Cache-Control max-age return of a relative time, because they can not determine whether the time synchronization client and server time, so when exist, higher Cache-Control priority.
If you force a cache miss, the cache negotiation process, the browser sends a request to carry identity cache server, the cache is determined by the server based on identifying whether to use the local cache.

clipboard.png

Rendering page

In the process of parsing the HTML, the DOM tree began to build, when met outside the chain of resources such as CSS / JS, CSS browser will be downloaded in parallel and JavaScript,
while CSS asynchronous download, the browser does not block construction of the DOM tree, but will block rendering ,
after JS can block HTML parsing, wait for the download is complete and the script execution will continue parsing HTML,
but also because JS can query CSSOM, it must be stopped before they download the CSS file before you can execute JavaScript.
img class Picture resources are downloaded asynchronously, without blocking the resolution, to replace the original src place directly after the download is complete picture.

clipboard.png

DOM tree and then merge CSSOM tree, generated render tree from the root node of the DOM tree traversing each visible node, ignore the script tags, meta tags, display: none of the nodes for each visible node, found its adaptation CSSOM rules and apply them.
Then began the layout, begin to traverse from the render tree root, calculate the exact position and size of each node in a web page.
After the layout is complete, the render tree is converted into pixels on the screen, display the page.

clipboard.png

Guess you like

Origin www.cnblogs.com/baimeishaoxia/p/11837742.html