普通图层与复合图层（合成层）的区别？

1. 复合图层（硬件加速层）

经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层。

绝对定位 absolute 不等于复合图层：position: absolute 只是脱离文档流，仍在普通绘制流程；只有显式开启硬件加速（transform: translateZ(0)、will-change、opacity 等）才会被提升为复合图层。

2. 复合层的作用

一般一个元素开启硬件加速后会变成复合图层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。

3. 使用硬件加速时的注意事项

请使用 z-index。使用硬件加速时，尽可能地使用 z-index，防止浏览器默认给后续的元素创建复合层渲染。如果 a 是一个复合图层，而且 b 在 a 上面，那么 b 也会被隐式转为一个复合图层，这点需要特别注意。

补充：常见的提升为合成层的方式：

  • transform: translate3d、translateZ、scale、rotate 等非 none 值；
  • opacity 在动画过程中；
  • will-change 属性（will-change: transform、will-change: opacity 等）；
  • filter、mix-blend-mode、isolation: isolate 等；
  • position: fixed（在多数浏览器中也独立成层）。

注意：合成层数量过多反而会导致"层爆炸（layer explosion）"，占用大量 GPU 显存。推荐按需使用 will-change，动画结束后及时移除。