【从输入URL到页面展示到底发生了什么】

问：从键入URL到页面展示期间，客户端到服务器到页面渲染，探究其间发生了什么

注：本文参考公众号“小林coding”和掘金“williamife”文章整理如下

---

从开发和运维的角度来看，总体来说分为以下几个步骤：

• 浏览器对URL进行解析，浏览器确定了服务器和文件名（URL实际是请求服务器里的文件资源）生成发送给Web服务器请求信息

• 生成HTTP消息后，需要委托操作系统将消息发送给Web服务器，这必须要提供通信对象的IP地址，也就是Web服务器域名对应的IP地址，有一种服务器专门保存了Web服务器域名和IP的对应关系，这就是DNS服务器。

• 通过DNS获取IP后（找到发送目的地），就可以把HTTP的传输工作交给操作系统的协议栈，协议栈上半部分是负责收发数据的TCP和UDP协议，HTTP是基于TCP协议传输的，在传输之前，需要建立TCP连接，通常称为三次握手，该操作为了保证双方都有发送和接收的能力。TCP生成的报文中数据部分就是存放HTTP头部+数据，组装好TCP报文，此时，数据包加上了TCP头部，接下来就交给下半部分的网络层处理。

• 网络层是用IP协议控制网络报收发操作。TCP模块在执行连接、收发、断开等各阶段操作时，都需要委托IP模块将数据封装成网络包发送给通信对象。到了这一步，IP层又给数据包加上一层IP包头。生成具有IP头部的数据包

• 生成了IP头部之后，接下来网络包还需要在IP头部的前面加上MAC头部，MAC头部是以太网使用的头部，它包含了接收方和发送方的MAC地址等信息，用于两点之间传输

• IP生成的网络包只是存放在内存中的一串二进制数字信息，没有办法直接发送给对方，因此，我们需要将数字信息转换为电信号，才能在网线上传输，负责执行这一操作的是网卡，要控制网卡需要靠网卡驱动程序，网卡驱动从IP模块获取到包之后，会将其复制到网卡内的缓存中，接着会在其开头加上报头和起始帧分解符，在末尾加上用于检测错误的帧校验序列。最后网卡会将包转为电信号，通过网线发送出去。

• 从网卡把数据包传输出去到服务器之间发生了什么？
  1）从局域网把数据发送到交换机（如果交换机没有缓存MAC地址和IP地址的映射，此时会通过ARP协议来获得），交换机的好处就是可以隔离冲突域。
  2）然后交换机再将数据发送到路由器，路由器具有转发和分组数据包的功能，
  网络包通过交换机到达下一个路由器，下一个路由器会将包转发给再下一个路由器，经过层层转发后，网络包再在交换机的帮助下，终于抵达了服务器。
  3）服务器扒开数据包的MAC头部，IP头部、TCP头部，通过序列号返回一个ACK，TCP头部里面还有端口号，HTTP服务器正在监听这个端口号。服务器知道HTTP进程想要这个包，于是将包发给HTTP进程，服务器HTTP进程看到请求是要访问一个页面，于是将这个网页封装在HTTP响应报文里，响应报文也要穿上TCP\IP\MAC头部，不过这次实时源地址是服务器IP地址，目的地址是客户端IP地址。

• 穿好头部的响应报文从网卡出去，交由交换机转发到路由器，路由器把响应数据包发到了下一个路由器，到客户端的路由器将包转发给客户端的交换机，再由交换机转发到客户端

• 客户端收到服务器的响应数据包后，开始扒开头部找到HTTP响应报文，接下来交给浏览器渲染页面。

• 多进程的浏览器中有一个浏览器渲染进程（内核）：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等，页面渲染通过渲染进程。渲染步骤分为如下几步：
  1）解析HTML，构建DOM树（节点树）
  2）解析CSS，生成CSS规则树（CSSOM）
  3）合并DOM树和CSS规则，生成渲染树（render树）
  4）布局render树（layout/reflow）,负责各元素尺寸、位置的计算，根据渲染树节点将节点树的每个节点布局在屏幕的正确位置。
  回流：一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树。
  5）绘制render树（paint）,绘制页面像素信息。遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成。
  重绘：意味着元素发生的改变只是影响了元素的一些外观之类的时候，此时只需要应用新样式绘制这个元素就可以了。

• 当数据传送完毕时，需要断开tcp连接，此时发起TCP四次挥手。

---