css 图层

在渲染DOM的时候，浏览器所做的工作实际上是：

1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果 （Recalculate style–样式重计算）
3. 为每个节点生成图形和位置 （Layout–布局，重排,回流）
4. 将每个节点绘制填充到图层位图中 （Paint–重绘）
5. 图层作为纹理上传至GPU
6. 组合多个图层到页面上生成最终屏幕图像 （Composite Layers–图层重组）

图层（composite）分类

• 浏览器渲染的图层一般包含两大类：普通图层以及复合图层

普通图层

• 普通图层：正常文档流、absolute/fix布局的元素都在这一图层

复合图层

• 复合图层：开启了硬件加速的元素，会位于新的图层，其重绘/重排（回流）不会影响普通图层

Chrome浏览器满足以下任意情况就会创建图层：

1. 拥有具有3D变换的CSS属性（比如：translateZ(0)或者translate3d(0,0,0)）
2. 根元素、video标签、canvas标签
3. CSS3动画的节点
4. 拥有CSS加速属性的元素(will-change)，值为：opacity、transform、transform-style、perspective、filter、backdrop-filter 这 6 个之一
5. 有 z-index 是负值的子元素或提高动画元素的 z-index，与其他元素隔开
6. position：fixed
7. 与其他元素可能重叠

硬件加速

• 通过硬件加速的方式，声明一个新的复合图层，它会单独分配资源 （当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘）
• GPU中，各个复合图层是单独绘制的，所以互不影响，这也是为什么某些场景硬件加速效果一级棒。

可以Chrome源码调试 -> More Tools -> Rendering -> Layer borders中看到，黄色的就是复合图层信息

开启硬件加速

perspective
backface-visibility
transform:translateZ(x)
opacity
filters
Will-change //作用是提前告诉浏览器要变化哪些属性，浏览器会开始做一些优化工作，一般配合opacity、translate

<video><iframe><canvas><webgl>等元素