浅谈从浏览器输入 URL 到页面渲染的流程
浏览器输入 URL 到页面渲染完成，这个过程大致可分为两个阶段：网络通信和页面渲染。
一、网络通信
互联网内各网络间设备的通信遵循 TCP/IP 协议，利用 TCP/IP 协议进行网络通信时，会通过分层与对方通信。数据传输的过程：由应用层产生数据后，经过传输层的分段处理（添加 TCP 或 UDP 包头）、网络层（添加 IP 地址信息）、数据链路层（封装成 MAC 帧）、物理层传输电信号。
浏览器输入 URL：
1.1、浏览器根据域名查找 IP 地址
在浏览器中输入域名 jd.com 后，查找 IP 地址分为两个部分：客户机本地的递归查询和服务器的迭代查询。
<1> 客户机本地的递归查询：
客户机本地会依次去查找浏览器本身的域名缓存、客户机系统自身的缓存、客户机系统中的 hosts 文件，如果在当前的缓存中找到了对应的 IP 地址映射，则直接返回，如果在本地的缓存中都未找到对应的 IP 地址，则会去服务器查询。
<2> 服务器的迭代查询：
如果本地配置的服务器没有缓存相域名的 IP，那么它就会去 ISP 运营商服务器去查找，如果也没有，运营商的服务器会返回给本地服务器一个根域的服务器地址。然后去根服务器发起访问，进行递归查询，如果也没有，就会去顶级域名的服务器去查找.com，然后再查找觉得 jd.com 的二级域名的服务器，以此类推就能找到相应的 IP。如果仍然未找到，代表域名是错误的。
1.2、浏览器发送 HTTP 请求
找到 IP 地址后，则向对应 IP 地址的服务发送 HTTP 请求，HTTP 请求消息包括请求起始行、请求头和请求主体
1）请求消息起始行：
包括：请求方法、请求 URI（请求地址报过 URL 和 URN）、协议版本。
2）请求头
包括：请求消息的专用头（ Host、Accept、Origin、Referer、User-Agent、Accept-Encoding、Accept-Language）、请求消息通用头（Connection、Cache-Control、Pragma、Date）、请求主体描述头（Content-Length、Content-Type）
3）请求主体（Body）
客户端想给服务器传递的消息。
1.3、TCP 传输报文
TCP 把应用层发送的用于网间传输的、用 8 位字节表示的数据流分成适当长度的报文段（报文段的长度不能超过 MTU 限制）。TCP 为了保证不发生丢包，就给每个包一个序号，同时序号也保证了传送到接收端实体的包按序接收。然后接收端实体对已成功收到的包发回一个响应的确认（ACK）；如果发送端实体在合理的往返延时（RTT）内未收到确认，那么对应的数据包就被假设为已丢失将会被进行重传。TCP 用一个校验和函数来检验数据是否有错误；在发送和接收时都要计算校验和。当 TCP 要发送数据时，需要通过三次握手协议建立连接。之后 TCP 把结果包传给 IP 层由它通过网络将包传送给接收端实体的 TCP 层。
第一次握手：客户端发送 syn 包到服务器，并进入 SYN_SENT 状态，等待服务器的确认。 第二次握手：服务器收到 syn 包，必须确认客户端的 syn，同时自己也发送一个 syn 包，即 SYN+ACK 包，此时服务器进入 SYN_RECV 状态。 第三次握手：客户端收到服务器的 SYN+ACK 包，向服务器发送确认包 ACK，此包发送完毕，客户端与服务器端进入 ESTABLISHED 状态，即 TCP 连接成功，完成三次握手。
1.4、IP 协议查询 MAC 地址并将数据发送的数据链路层
IP 协议的作用是把 TCP 分割好的各种数据包传送给接收方，要保证确实能传到接收方还需要接收方的 MAC 地址，也就是物理地址。IP 地址和 MAC 地址是一一对应的关系，一个网络设备的 IP 地址可以更改，但是 MAC 地址一般是固定不变的。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的 MAC 地址来搜索下一个中转目标。
ARP 是地址解析协议，功能是根据 IP 地址获取物理地址的一个 TCP/IP 协议，即把 IP 地址转化为 MAC 地址。发送方首先检查 ARP 缓存表，查找目的地址的 IP 与 MAC 地址。如果存在地址中，直接使用 ARP 协议解析，完成的封装，传输数据。如果不存在目的地址的 MAC 地址，则发送一个 ARP 广播（包含本主机的 IP 地址、MAC 地址、目的主机的 IP 地址）。网络中主机接收到广播后，先检查自己的 IP 地址，不符合丢弃该广播，符合则把源主机的 IP 地址和 MAC 地址映射添加到本地 ARP 缓存中，并向源主机发出 ARP 应答（包含自己的 IP 地址和 MAC 地址）。源主机收到应答后，把目标主机的 IP 和 MAC 地址添加到缓存中，然后开始进行通信。
在找到对方的 MAC 地址后，将数据发送到数据链路层传输，此时客户端发送阶段结束。
1.5、服务器接收数据并相应请求返回相应的文件
接收端的服务器在链路层接收到数据，然后再一层层去掉添加的首部。这个过程包括在传输层通过 TCP 协议将分段的数据包重新组成原来的 HTTP 请求报文。然后服务器发送 HTTP 响应。HTTP 的响应消息包括响应起始行、响应头、响应主体。
1）响应起始行：
包括：协议版本、空格、响应状态码、空格、原因短句（描述给你的状态码的原因）。
2）响应头
包括：响应消息的专用头（ Server、Last-Modified、Content-Encoding）、响应消息通用头（Connection、Cache-Control、Pragma、Date）、请求主体描述头（Content-Length、Content-Type）
3）响应主体描述头
客户端想给服务器传递的消息。
二、页面渲染
请求成功后，服务器返回给浏览器的文本信息，通常包括 HTML、CSS、JS、图片等文件。不同浏览器内核由于内核不同，怼页面的渲染的过程也不相同。
webkit 的渲染过程：
Gecko 的渲染过程：
渲染的基本流程：HTML 解析 DOM Tree、CSS 解析 Style Rules、将两者关联生成 Render Tree、Layout 根据 Render Tree 计算每个节点的信息、Painting 根据计算好的信息绘制整个页面。
2.1、HTML 解析
HTML Parser 的任务是将 HTML 标签解析成 DOM Tree
经过解析后的 DOM Tree
2.2、CSS 解析
CSS Parser 将 CSS 解析成 Style Rules，Style Rules 也叫 CSSOM（CSS Object Model），CSS Parser 的作用就是将很多个 CSS 文件中的样式合并解析出具体树形结构。
2.3、js 脚本处理、呈现树
浏览器解析文档时，当遇到 script 标签的时候会立即解析脚本，停止解析文档，因为 javascript 可能会改动 DOM 和 CSS，所以继续解析会造成浪费。如果脚本是外部的，会等待下载完毕，再继续解析文档。脚本解析会将脚本中的 DOM 和 CSS 的地方分别解析出来，然后追加到 DOM Tree 和 Style Rules 上。
Render Tree 的构建其实就是DOM Tree 和 CSSOM attach 的过程。实际上就是一个计算好的样式与 HTML 对应的 Tree。
2.4、样式计算
计算样式是一个很复杂的过程，DOM 中一个元素可以对应样式表中的多个样式，样式表包含了所有的样式：浏览器默认样式、自定义样式表、inline 样式表元素、HTML 可视化属性。为了简化样式计算，Friefox 还采用了另外两种树：规则树和样式上下文树。WebKit 也有样式对象，但它们不是保存在类似样式上下文树这样的树结构中，只是由 DOM 节点指向此类对象的相关样式。
样式上下文树包含端值，要计算出这些值，应按照正确顺序应用所有的匹配规则，并将其从逻辑值转化为具体的值。例如，如果逻辑值是屏幕大小的百分比，则需要换算成绝对的单位。规则树使得节点之间可以共享这些值，以避免重复计算，还可以节约空间。所有匹配的规则都存储在树中。路径中的底层节点拥有较高的优先级。规则树包含了所有已知规则匹配的路径。规则的存储是延迟进行的。规则树不会在开始的时候就为所有的节点进行计算，而是只有当某个节点样式需要进行计算时，才会向规则树添加计算的路径。样式对象具有与每个可视化属性一一对应的属性（均为 CSS 属性但更为通用）。如果某个属性未由任何匹配规则所定义，那么部分属性就可由父代元素样式对象继承，其他属性具有默认值。
2.5、布局并绘制
创建渲染树后，下一步就是布局（Layout），或者叫回流（reflow，relayout），这个过程就是通过渲染树中的渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置，而有些时候我们会在文档布局完成后对 DOM 进行修改，这时候可能需要重新进行布局，也可称为回流，本质上还是一个布局的过程，每一个渲染对象都有一个布局或回流的方法，实现其布局或回流。
在绘制的阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成。CSS2 规范定义了绘制流程的顺序，绘制的顺序其实就是元素进入堆栈样式上下文的顺序，这些堆栈会从后往前绘制，因此这样的顺序会影响绘制。块呈现器的堆栈顺序如下：背景颜色、背景图片、边框、子代、轮廓。
经过上述一序列的请求和渲染，就形成了浏览器中所展示的页面。
版权声明: 本文为 InfoQ 作者【京东科技开发者】的原创文章。
原文链接:【http://xie.infoq.cn/article/e924f3bc8f915501da3f91b6d】。文章转载请联系作者。
拥抱技术，与开发者携手创造未来！ 2018-11-20 加入
我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者，提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】，欢迎大家来玩
评论