从输入URL到页面加载完成

来源：互联网发布：张爱玲作品知乎编辑：程序博客网时间：2024/06/05 18:51

当在浏览器中输入网址，如www.google.com，浏览器是如何将页面显示出来的？这个过程可以分为两个部分：网络通信与页面渲染。

一、网络通信

互联网内个网络设备之间的通信都遵循TCP/IP协议。利用TCP/IP协议进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层往上走，如图所示：

用户在浏览器中输入URL。如Http://www.google.com，其中，http为协议，www.google.com为网络地址，即请求的资源放在哪台计算机上。网络地址可以使用域名，也可以使IP地址。
应用层DNS域名解析。客户端首先检查本地是否有域名对应的IP地址，如找到，则返回相应的IP地址，若没有找到，则请求上级DNS服务器，直到找到或者到达根节点。
应用层客户端发送HTTP请求。HTTP请求包括请求报头和请求主体两部分，其中请求报头包含了至关重要的信息，包括请求的方法（GET/POST等）、目标url、遵循的协议（http、https、ftp等）、返回的信息是否需要缓存，以及客户端是否发送cookie等。
传输层TCP传输报文。位于传输层的TCP协议为传输报文提供可靠的字节流服务。他为了方便传输，将大块的数据分割成以报文段为单位的数据包进行管理，并为它们编号，方便服务器接收时能准确地还原报文信息。TCP协议通过‘三次握手’方法保证传输的安全可靠。
网络层IP协议查询MAC地址。IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能够传送到接收方还需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一对应的关系，一个网络设备的IP地址可以更换，但MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。
数据到达数据链路层。在找到对方的MAC地址后，就将数据发送到数据链路层传输。这时，客户端发送请求的阶段结束。
服务器接收数据。接收端的服务器在链路层接收到数据包，再层层向上知道应用层。这过程包括在传输层通过TCP协议将分段的数据包重新组成原来的HTTP请求报文。
服务器响应请求。服务器端接收到客户端的HTTP请求后，查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三维十进制数字组成，其中比较常见的是200 OK表示请求成功、301表示永久重定向，即请求的资源已经永久转移到新的位置，在返回301状态的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。404 not found表示客户端请求的资源找不到。
服务器返回相应的HTML文件。接下来就到了页面的渲染阶段了。

二、页面渲染

现代浏览器的渲染过程如下：解析HTML构成DOM树 -> 构建render树 -> 布局render树 -> 绘制render树。

当浏览器接收到一个HTML文件时，会自上而下加载，并在加载过程中解析渲染。DOM树是有HTML文件中的标签排列组成，render树是在DOM树种加入css或HTML中的style样式而形成。render树只包含需要显示在页面中的DOM元素，像<head>元素或者display属性值为none的元素都不在render树中。

为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。在遇到外部链入的脚本标签或样本标签或图片时，会再次发送HTTP请求重复上述步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式。图片文件加载完立刻显示在相应位置，这一过程可能会触发页面的重重绘。

0 0