这是我参与更文挑战的第13天，活动详情查看：更文挑战

前篇

从输入URL到页面展示，这中间发生了什么？(导航流程篇)

渲染流程(渲染流水线)

一旦文档进入“确认提交”的状态,渲染进程便开始页面解析和子资源加载。

按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

构建DOM树(DOM Tree)

因为浏览器无法理解和使用HTML，所以需要把HTML转换为浏览器能够理解的结构，这种结构就叫DOM树。

// 通过document可以查看DOM树结构
document
复制代码

样式计算(Recalculate Style)

样式计算是为了计算DOM节点每个元素的具体样式，它分为3个步骤完成。

把CSS转换为浏览器能够理解的结构

和HTML文件一样，浏览器也无法直接理解这些纯文本的CSS，这里会把CSS样式的三大来源(link标签引用的外部CSS文件，style标签内的CSS，元素style属性内嵌的CSS)，转换为浏览器可以理解的结构——styleSheets。

styleSheets这部分，也有个另外的称呼，叫做CSSOM，学习李兵大佬这个部分的时候，李兵大佬表示浏览器源码中并没有CSSOM这个称呼，也许这个称呼是约定俗称的说法？不过为了统一，后续都将使用styleSheets这个称呼，而非CSSOM。
```
// 通过document.styleSheets，可以查看styleSheets(也称CSSOM)的结构
document.styleSheets
复制代码
```
styleSheets中包含了上面CSS三大来源的样式，并且该结构同时具备了查询和修改功能，这会为后面的样式操作提供基础。

转换样式表中的属性值，使其标准化

作为前端的同学，应该都知道，CSS文本中有很多不同的属性值，比如代表字号的em，代表颜色的blue，bold，这些类型数值也不容易被渲染引擎理解，所以这一步，渲染引擎需要把所有值转换为渲染引擎容易理解，标准化的计算值，也叫属性值标准化。

/* 原CSS属性值 */
body { font-size: 2em; }
p {color: blue;}
span {display: none;}
div {font-weight: bold;}
div p {color: green;}
div {color:red;}
/* 标准化过程后的CSS属性值 */
body { font-size: 32px }
p {color: rgb(0,0,255)}
span {display: none}
div {font-weight: 700}
div p {color: rgb(0,128,0)}
div {color: rgb(255,0,0)}
复制代码

计算出DOM树中每个节点的具体样式

样式计算阶段的目的是为了计算出 DOM 节点中每个元素的具体样式，在计算过程中需要遵守 CSS 的继承和层叠两个规则。

CSS层叠和继承

这个阶段最终输出的内容是每个 DOM 节点的样式，并被保存在 ComputedStyle 的结构内。

布局阶段

有了DOM树和DOM树中的样式，接下来便是需要计算出DOM树中可见元素的几何位置，也叫布局。

创建布局树

布局树是一颗只包含所有可见节点的树，所以像head标签，或者使用了display:none属性的元素，不能被包含到布局树中。

布局计算

有了布局树，就可以计算布局树节点的几何坐标位置了。

执行布局操作的时候，会把布局的几何运算结果重新写回布局树中，所以布局树既是输入内容也是输出内容。(这是布局阶段一个不合理的地方，因为在布局阶段并没有清晰地将输入内容和输出内容区分开来)

针对这个问题，Chrome 团队正在重构布局代码，下一代布局系统叫 LayoutNG，试图更清晰地分离输入和输出，从而让新设计的布局算法更加简单。

分层

由于页面有许多复杂的效果，如3D变换、页面滚动，或使用z-index做的z轴排序，所以渲染引擎还需要为这些特定的节点生成专用图层，并生成一颗对应的图层树（LayerTree）。它跟PhotoShop中图层的概念非常类似。

在Chrome开发者工具选择”Layers”标签，可以以可视化的方式查看页面的分层情况。

通常情况下，并不是布局树每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就属于父节点的图层。

当满足以下两个条件之一的元素，渲染引擎就会为这个元素提升为单独的一个图层。

拥有层叠上下文属性的元素

具体满足层叠上下文的规则可阅读下方的MDN文档，像明确的定位属性、透明属性、CSS 滤镜、z-index 等，都满足层叠上下文的规则。

层叠上下文
需要被剪裁(clip)的地方也会被创建为图层

如使用overflow属性,当内容溢出盒子区域，出现被裁剪的情况，渲染引擎会为文字部分和滚动条(如果有)单独创建一个图层。

绘制列表(由绘制指令组成)

完成图层树的构建后，渲染引擎会对图层树中的每个图层进行绘制，绘制过程跟canvas很类似。

它会根据绘制每个图层的步骤，把一个图层绘制拆分成很多小的绘制指令(跟canvas的绘制指令非常类似)，最后把这些指令按顺序组成一个待绘制列表。

可以通过Chrome开发者工具的”Layers”标签，选择”doucment”层，查看详细的绘制列表。

分块

绘制列表只是用来记录绘制顺序和绘制指令的列表，实际绘制操作是由渲染引擎的合成线程来完成。

当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程，合成线程会将图层划分为图块(tile)，这些图块的大小通常是 256×256 或者 512×512。

然后合成线程会按照视口(屏幕上页面的可见区域就叫视口-ViewPort)附近的图块来生成位图，生成位图的操作是交由渲染进程内的栅格化进程池进行的。

栅格化(raster)

图块是栅格化执行的最小单位，所谓栅格化，是指将图块转换为位图。

渲染进程内有栅格化进程池，会优先拿到视口(屏幕上页面的可见区域就叫视口-ViewPort)附近的图块进行栅格化过程，栅格化过程都会使用GPU进行加速，栅格化后生成的位图被保存在GPU的内存中。

合成和绘制

一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。

浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

到此，从输入URL到页面展示的过程就全部完成了。

总结

导航流程

用户输入
1. 用户在地址栏按下回车，检查输入（查询关键字或符合 URL 规则），组装完整 URL。
2. 回车前，当前页面执行 onbeforeunload 事件。
3. 浏览器进入加载状态。
URL 请求
1. 浏览器进程通过 IPC(进程间通信) 把 URL 请求发送至网络进程。
2. 查找页面资源缓存（有效期内），存在缓存且在有效期内，则直接返回给浏览器进程。
3. 如果没有页面资源缓存，则根据URL地址查询DNS 解析（DNS缓存/DNS服务器），获得服务器的IP地址；
4. 创建 TCP 连接（三次握手），单域名连接数最多6个，超出部分进入 TCP 队列，HTTPS还需要建立TLS连接。
5. 发送 HTTP 请求（请求行[方法、URL、协议]、请求头[Cookie等]、请求体）；
6. 接受请求信息（响应行[协议、状态码、状态消息]、响应头、响应体等）；
- 状态码 301 / 302，触发重定向规则，根据响应头中的 Location 重定向；
- 状态码 200，正常响应，根据响应头中的 Content-Type 决定如何响应（下载文件、加载资源、渲染 HTML）。
准备渲染进程

根据是否同一站点（相同的协议和根域名），决定是否复用渲染进程。
提交文档
1. 浏览器进程接受到网路进程的响应头数据，向渲染进程发送『提交文档』消息；
2. 渲染进程收到『提交文档』消息后，与网络进程建立传输数据『管道』；
3. 传输完成后，渲染进程返回『确认提交』消息给浏览器进程；
4. 浏览器接受『确认提交』消息后，移除旧文档、更新界面、地址栏，导航历史状态等，此时标识浏览器加载状态的小圆圈，从此前 URL 网络请求时的逆时针旋转，即将变成顺时针旋转（进入渲染阶段）。

渲染(渲染流水线)

构建 DOM 树

把HTML使用解析器转换为浏览器能够理解的DOM结构。
样式计算
1. 把CSS转换为浏览器能够理解的结构-styleSheets(也称CSSOM)。
2. 转换样式表中的属性值，使其标准化。
3. 计算出DOM树中每个节点的具体样式（继承、层叠），并保存在 ComputedStyle 的结构内。
布局阶段(DOM 树中元素的几何位置)
1. 使用DOM & ComputedStyle构建成布局树（DOM 树中的可见元素）。
2. 布局计算。
分层
1. 特定节点生成专用图层，生成一棵图层树（层叠上下文、Clip，类似 PhotoShop 里的图层）。
2. 拥有层叠上下文属性（明确定位属性、透明属性、CSS 滤镜、z-index 等）的元素会创建单独图层。
3. 需要剪裁的地方也会创建图层。
4. 没有图层的 DOM 节点属于父节点图层。
绘制列表(由绘制指令组成)
1. 输入：图层树；
2. 渲染引擎对图层树中每个图层进行绘制；
3. 拆分成绘制指令，生成绘制列表，提交到合成线程；
4. 输出：绘制列表。
分块

合成线程会将较大、较长的图层（一屏显示不完，大部分不在视口内）划分为图块（tile, 256*256, 512*512）。
光栅化（栅格化）
1. 在光栅化线程池中，将视口附近的图块优先生成位图（栅格化执行该操作）；
2. 快速栅格化：GPU 加速，生成位图（GPU 进程）。
合成绘制
1. 绘制图块命令——DrawQuad，提交给浏览器进程；
2. 浏览器进程的 viz 组件，根据DrawQuad命令，绘制在屏幕上。