基本概念
浏览器页面渲染流程是我们今天要讨论的主题。为了能更好地理解渲染模块，你需要快速理解 HTML、CSS 和 JavaScript 的含义：
- 「HTML 的内容是由标记和文本组成」。标记也称为标签，每个标签都有它自己的语义，浏览器会根据标签的语义来正确展示 HTML 内容。
- 「CSS 又称为层叠样式表，是由选择器和属性组成」。如果需要改变 HTML 的字体颜色、大小等信息，就需要用到 CSS。
- 「JavaScript（简称为 JS），使用它可以使网页的内容“动”起来」。
按照渲染的时间顺序，流水线可分为如下几个子阶段：「构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成」。接下来，在介绍每个阶段的过程中，你应该重点关注以下三点内容：
- 开始每个子阶段都有其输入的内容；
- 然后每个子阶段有其处理过程；
- 最终每个子阶段会生成输出内容。
构建 DOM 树
「浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。」
DOM 树的构建过程，你可以参考下图：
从图中可以看出，构建 DOM 树的「输入内容」是一个非常简单的 HTML 文件，然后经由 HTML 解析器解析，最终输出树状结构的 DOM。
生成 DOM 树之后，但是 DOM 节点的样式我们依然不知道，要让 DOM 节点拥有正确的样式，这就需要样式计算了。
样式计算
样式计算的目的是为了计算出 DOM 节点中每个元素的具体样式，这个阶段大体可分为三步来完成。
1. 把 CSS 转换为浏览器能够理解的结构
CSS 样式的来源主要有哪些呢？你可以先参考下图：
从图中可以看出，CSS 样式来源主要有三种：
- 通过 link 引用的外部 CSS 文件
<style>标记内的 CSS- 元素的 style 属性内嵌的 CSS
和 HTML 文件一样，浏览器也是无法直接理解这些纯文本的 CSS 样式，所以当「渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheets」。
2. 转换样式表中的属性值，使其标准化
现在我们已经把现有的 CSS 文本转化为浏览器可以理解的结构了，那么接下来就要对其进行「属性值的标准化操作」。
要理解什么是属性值标准化，你可以看下面这样一段 CSS 文本：
body { font-size: 2em }
p {color:blue;}
span {display: none}
div {font-weight: bold}
div p {color:green;}
div {color:red; }
可以看到上面的 CSS 文本中有很多属性值，如 2em、blue、bold，这些类型数值不容易被渲染引擎理解，所以「需要将所有值转换为渲染引擎容易理解的、标准化的计算值」，这个过程就是属性值标准化。
CSS 代码标准化后的属性值：
3. 计算出 DOM 树中每个节点的具体样式
样式的属性被标准化后，接下来就需要计算 DOM 树中每个节点的样式属性了，这里面就「涉及到 CSS 的继承规则和层叠规则了」。
CSS 继承就是每个 DOM 节点都包含有父节点的样式。
样式层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称“层叠样式表”正是强调了这一点。
总之，样式计算阶段的目的是为了计算出 DOM 节点中每个元素的具体样式，在计算过程中需要遵守 CSS 的继承和层叠两个规则。这个阶段最终输出的内容是每个 DOM 节点的样式，并被保存在 ComputedStyle 的结构内。
布局阶段
DOM 树和 DOM 树中元素的样式构建完成之后，还不足以显示页面，因为我们还不知道 DOM 元素的几何位置信息。「那么接下来就需要计算出 DOM 树中可见元素的几何位置，我们把这个计算过程叫做布局」。
Chrome 在布局阶段需要完成两个任务：「创建布局树和布局计算」。
1. 创建布局树
DOM 树还含有很多不可见的元素，比如 head 标签，还有使用了 display:none 属性的元素。所以「在显示之前，还要额外地构建一棵只包含可见元素布局树」。
构建布局树，浏览器大体上完成了下面这些工作：
- 遍历 DOM 树中的所有可见节点，并把这些节点加到布局树中；
- 而不可见的节点会被布局树忽略掉，如 head 标签下面的全部内容，再比如
display:none属性的元素。
2. 布局计算
生成完整的布局树之后。那么接下来，就要计算布局树节点的坐标位置了。布局的计算过程非常复杂，我们这里就不展开，感兴趣的可以自行百度学习。
在执行布局操作的时候，会把布局运算的结果重新写回布局树中，所以布局树既是输入内容也是输出内容，这是布局阶段一个不合理的地方，因为在布局阶段并没有清晰地将输入内容和输出内容区分开来。针对这个问题，Chrome 团队正在重构布局代码，下一代布局系统叫 LayoutNG，试图更清晰地分离输入和输出，从而让新设计的布局算法更加简单。
分层
构建出布局树，而且每个元素的具体位置信息都计算出来了，那么接下来还是不能开始着手绘制页面。
因为页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-index 做 z 轴排序等，为了更加方便地实现这些效果，「渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树」（LayerTree）。
渲染引擎给页面分了很多图层，这些图层按照一定顺序叠加在一起，就形成了最终的页面。通常情况下，「并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层」。
渲染引擎通常会为满足下面两点中任意一点的元素创建新的图层。
- 「拥有层叠上下文属性的元素会被提升为单独的一层」。
- 文档根元素（
<html>） - position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素
- position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）
- flex (flexbox) 容器的子元素，且 z-index 值不为 auto
- grid (grid) 容器的子元素，且 z-index 值不为 auto
- opacity 属性值小于 1 的元素（参见 the specification for opacity）
- 文档根元素（
若你想要了解更多层叠上下文的知识，你可以参考这篇文章。
- 「需要剪裁（clip）的地方也会被创建为图层」。
首先你需要了解什么是裁剪：
❝如果把 div 的大小限定为 200 * 200 像素，而 div 里面的文字内容比较多，文字所显示的区域肯定会超出 200 * 200 的面积，这时候就产生了剪裁，渲染引擎会把裁剪文字内容的一部分用于显示在 div 区域，出现这种裁剪情况的时候，渲染引擎会为文字部分单独创建一个层，如果出现滚动条，滚动条也会被提升为单独的层。
❞
所以说，「元素有了层叠上下文的属性或者需要被剪裁，满足其中任意一点，就会被提升成为单独一层」。
图层绘制
在完成图层树的构建之后，渲染引擎会对图层树中的每个图层进行绘制，那么接下来我们看看渲染引擎是怎么实现图层绘制的？
渲染引擎实现图层的绘制是把一个图层的绘制拆分成很多小的「绘制指令」，然后再把这些指令按照顺序组成一个待绘制列表，如下图所示：
从图中可以看出，绘制列表中的指令其实非常简单，就是让其执行一个简单的绘制操作，比如绘制粉色矩形或者黑色的线等。而绘制一个元素通常需要好几条绘制指令，因为每个元素的背景、前景、边框都需要单独的指令去绘制。所以在图层绘制阶段，输出的内容就是这些待绘制列表。
栅格化（raster）操作
绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。你可以结合下图来看下渲染主线程和合成线程之间的关系：
如上图所示，当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程。
通常一个页面可能很大，但是用户只能看到其中的一部分，我们把用户可以看到的这个部分叫做「视口」（viewport）。
在有些情况下，有的图层可以很大，比如有的页面你使用滚动条要滚动好久才能滚动到底部，但是通过视口，用户只能看到页面的很小一部分，所以在这种情况下，要绘制出所有图层内容的话，就会产生太大的开销，而且也没有必要。
基于这个原因，「合成线程会将图层划分为图块（tile）」，这些图块的大小通常是 256x256 或者 512x512。
「然后合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图」。而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的，运行方式如下图所示：
通常，栅格化过程都会使用 GPU 来加速生成，使用 GPU 生成位图的过程叫快速栅格化，或者 GPU 栅格化，生成的位图被保存在 GPU 内存中。GPU 操作是运行在 GPU 进程中，如果栅格化操作使用了 GPU，那么最终生成位图的操作是在 GPU 中完成的，这就涉及到了跨进程操作。具体形式你可以参考下图：
从图中可以看出，渲染进程把生成图块的指令发送给 GPU，然后在 GPU 中执行生成图块的位图，并保存在 GPU 的内存中。
合成和显示
一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。
浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。
到这里，经过这一系列的阶段，编写好的 HTML、CSS、JavaScript 等文件，经过浏览器就会显示出漂亮的页面了。
渲染流水线大总结
好了，我们现在已经分析完了整个渲染流程，从 HTML 到 DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。下面我用一张图来总结下这整个渲染流程：
结合上图，一个完整的渲染流程大致可总结为如下：
- 渲染进程将 HTML 内容转换为能够读懂的「DOM 树」结构。
- 渲染引擎将 CSS 样式表转化为浏览器可以理解的 「styleSheets」，计算出 DOM 节点的样式。
- 创建「布局树」，并计算元素的布局信息。
- 对布局树进行分层，并生成「分层树」。
- 为每个图层生成「绘制列表」，并将其提交到合成线程。
- 合成线程将图层分成「图块」，并在「光栅化线程池」中将图块转换成位图。
- 合成线程发送绘制图块命令 「DrawQuad」 给浏览器进程。
- 浏览器进程根据 DrawQuad 消息「生成页面」，并「显示」到显示器上。
性能优化
有了上面介绍渲染流水线的基础，我们再来看看三个和渲染流水线相关的概念——“「重排」”“「重绘」”和“「合成」”。理解了这三个概念对于你后续 Web 的性能优化会有很大帮助。
1. 更新了元素的几何属性（重排）
你可先参考下图：
从上图可以看出，如果你通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫「重排」。无疑，「重排需要更新完整的渲染流水线，所以开销也是最大的」。
2. 更新元素的绘制属性（重绘）
接下来，我们再来看看重绘，比如通过 JavaScript 更改某些元素的背景颜色，渲染流水线会怎样调整呢？你可以参考下图：
从图中可以看出，如果修改了元素的背景颜色，那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
直接合成阶段
那如果你更改一个既不要布局也不要绘制的属性，会发生什么变化呢？渲染引擎将跳过布局和绘制，只执行后续的合成操作，我们把这个过程叫做合成。具体流程参考下图：
在上图中，我们使用了 CSS 的 transform 来实现动画效果，这可以避开重排和重绘阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，「所以相对于重绘和重排，合成能大大提升绘制效率」。
参考文章
本文使用 mdnice 排版
