浅析Chrome的渲染流程（下）

在浅析Chrome的渲染流程（上）中我们介绍了渲染流水线中的 DOM生成、样式计算 和 布局 三个阶段。今天我们来讲下渲染流水线后面的阶段。

分层

经过生成布局之后生成的布局树，将每个元素的具体位置信息都计算出来了，那么接下来是不是开始着手绘制页面了？

答案依然是否定的。

因为页面中有很多复杂的效果，比如一些复杂的3D变换、页面滚动，或者使用z-indexing做z轴排序等。为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerThree）。提到图层，大家最先应该想到的是PS软件。PS中图层是很常见的，比如将图片背景变成透明的，就需要先复制一个图层出来后，用滤棒清除掉图层中不需要的部分，然后应用到原始图像上，就可以生成一个具有透明背景的图片了。

要想直观地理解什么是图层，可以通过Chrome的 “开发者工具”，选择 “Layers” 标签，就可以可视化页面的分层情况，如下图：

如果找不到 “Layers” 这个标签，请参考下图：

从上面的第一张图可以看出，渲染引擎给页面分了很多图层，这些图层按照一定的顺序折叠加在一起，就形成了最终的页面。

现在你知道了浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。那么这些图层和布局树节点的之间的关系是什么样子呢？请参考下图：

通常情况下，并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的图层，那么这个节点就从属于父节点的图层。比如上图中的span标签就没有专属图层，那么它们就从属于它们的父节点图层。但不管怎样，最终每个节点都会直接或间接地从属一个层。

浏览器对于满足以下情况的节点会单独创建一个图层：

1.拥有层叠上下文属性的元素会被提升为单独的一个层。

页面是个二维平面，但是层叠上下文能够让HTML元素具有三维概念，这些HTML元素按照自身属性的优先级分布在垂直于这个二维平面的z轴上。