1.前言

前面说了，CSS和JS是如何影响DOM树生成的，现在继续沿着流水线向下分析，分析一下DOM树生成之后的事情。

我们知道生成DOM树之后，需要经历布局，分层，绘制，合成，显示等节点后才能显示页面。

这一篇文章主要分析渲染引擎的分层和合成机制，因为分层和合成机制代表了浏览器最先进的合成技术，Chrome团队为了做到这一点，做了许多优化。了解原理后，可以拓宽视野，有助于加深理解CSS动画和JavaScript底层工作机制。

2.显示器怎么显示图像？

每个显示器都有固定的刷新评率，60HZ为主，美秒60张图片，更新的图片都来自于显卡中一个叫前缓冲区的地方，显示器做的事很简单，美秒固定读取60次前缓冲区的图像，并展示到显示器。

显卡作用

• 合成图像，将图像保存在后缓冲区
• 一旦显卡把合成图像写到后缓冲区，系统就会让后缓冲区和前缓冲区互换，这样就能保证显示器能读取到最新显卡合成的图像。
• 一般情况，显卡更新频率和显示器刷新频率一致，但有些时候，在复杂的场景中，显卡处理图片变慢，就会造成视觉卡顿

3.帧VS帧率

一张图片就是1帧。

一秒钟更新多少张图片就是帧率，

4.如何生成一帧图像

生成任意一帧的方式有：重排，重绘，合成三种

这三种的渲染路径都是不同的，一般渲染路径越长，生成图像花费的时间越长。

重排：重新根据CSSOM和DOM来计算布局树，这样的话整个渲染流水线的每一个阶段都执行一遍，消耗性能

**重绘：**重绘不会重新布局，操作效率稍微高点，但是依然需要重新计算绘制信息，并触发操作之后的一系列操作。

合成：合成操作路线非常短，布局和绘制两个阶段都无需触发，直接采用GPU，效率非常高。

5.分层合成

页面组成复杂，点击按钮有动画，鼠标滚动有动画，还有3D特效。要是没分层，从布局树直接生成目标图片的话，那么每次很小变动就要触发重排或者重绘机制，这种 牵一发而动全身的绘制策略严重影响页面的渲染效率。

为了提升每帧的渲染效率，Chrome 引入了分层和合成的机制。那该怎么来理解分层和合成机制呢?