浏览器工作原理（6）-渲染流程，HTML、CSS、JavaScript是如何变成页面的

上一章节讲了从输入URL到页面展示的一个过程，这次说一下渲染阶段

渲染机制比较复杂，渲染模块在执行过程中会被划分为很多子阶段，按照时间轴来分为以下几个阶段：构建DOM树，样式计算，布局阶段，绘制，分块，光栅化，合成。接下来来依次看一下每个阶段：

构建DOM树

构建DOM树的原因是因为浏览器无法直接理解和使用HTML，但是可以理解DOM树结构，从HTML文件到DOM树生成，是由HTML解析器来完成的，DOM树是保存在内存中树状结构，DOM树只是一个结构，并不具有样式，想要拥有正确的样式，还要进行样式计算。

样式计算(Recaculate Style)

该阶段可以分为下面三步来完成：

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

CSS样式的引入有三种方式：link引入外部文件， “style” 标签内css，HTML标签的style属性，浏览器同样无法解析CSS文本，需要转换为styleSheets，在Chrome的console里输入document.styleSheets可以查看对应的样式结构。

2 转换样式属性值，使其标准化

写CSS样式的时候，很多会用到em, rem, red, bold等类似的属性值，但是这些属性浏览器不一定都能理解，这就需要还有一步将这些属性标准化的过程，示意图如下：

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

样式标准化之后，继续计算DOM树每个节点的属性

涉及到CSS的继承规则和层叠规则

该部分比较简单，不细讲了

4 布局阶段

有了DOM树和DOM树的样式之后，还要确定几何位置才能显示页面，计算DOM树种可见元素的几何位置的过程叫布局，这个过程需要两个任务：创建布局树和布局计算

1. 创建布局树
   这个过程会去掉不可见的元素，如head标签，display：none的元素，额外地构建一颗只包含可见元素的布局树，遍历DOM树种所有节点，忽略掉不可见元素，把可见元素加入到布局树

2. 布局计算
   有了布局树之后还要进行坐标位置计算，输入布局树，输出计算了位置的布局树。

3. 分层
   生成了布局树之后，还是不能开始绘制页面，涉及到复杂的3D变换，页面滚动，或者z-index控制的图层等效果，渲染引擎需要为特定的节点生成专用的图层，并生成一颗对应的图层树(LayerTree)，浏览器的页面其实被分成了很多图层，这些图层叠加后合成了最终的页面，并不是布局树中的每一个节点都包含一个图层，如果一个节点没有对应的图层，那么他属于父节点的图层
   如果一个节点满足以下两点中的任一点便可以提升为一个图层：
   3-1. 拥有层叠上下文属性的元素会提升为单独的一层
   
   具有定位属性的元素，定义了透明属性的元素，使用CSS滤镜的元素等都有层叠上下文
   3-2 需要裁减(clip)的地方也会被创建为图层
   内容文字超越了容器，这时候就产生了裁减，渲染引擎会把裁剪文字内容的一部分显示在div区域，出现这种裁剪情况的时候，渲染引擎会为文字部分单独创建一个层

5 图层绘制

完成了图层树的构建之后，渲染引擎会对图层树中的每个图层进行绘制，渲染引擎把每个图层的绘制拆分成很多小的绘制指令，然后把绘制指令按照顺序组成一个待绘制列表

6 栅格化操作

有了绘制指令列表，然后渲染引擎中的合成线程就可以开始绘制了，下图展示了渲染主线程和合成线程之前的关系
当图层的绘制列表准备好之后，主线程会把绘制列表提交给合成线程，在一个页面上，我们把用户可以看到的这个部分叫做视口(viewport),合成线程会优先生成视口附近的位图，生成位图的操作是由格栅化来执行的，通常格栅化过程使用GPU来加速生成，生成后的位图保存在GPU内存中。
整个过程如图所示

相关概念

1 重排：更新了元素的几何属性，修改了元素的高度、宽度，浏览器会触发重新布局，重排需要更新完整的渲染流水线，所以开销最大
2 重绘：不会触发布局阶段，直接进入绘制阶段，重绘省去了布局和分层阶段，执行效率比重排高
3 直接合成： 如果更改一个既不布局也不绘制的属性，直接进入合成阶段