特殊解析 - composite合成

• 绘制的过程，可以将布局后的元素绘制到多个合成图层中

  • 这是浏览器的一种优化手段

• 默认情况下，标准流中的内容都是被绘制到同一个图层（Layer）中的

• 而一些特殊的属性，会创建一个新的合成层（CompositingLayer），并且新的图层可以利用GPU来加速绘制

  • 因为每个合成层都是单独渲染的

• 那么哪些属性可以形成新的合成层呢？常见的有：

  • 3D transforms
  • video, canvas, iframe
  • opacity 动画转换时
  • position：fixed
  • will-change：一个实验性的属性，提前告诉浏览器元素可能发生哪些变化
  • animation或transition设置了opacity、transform

• 分层确实可以提高性能，但是它以内存管理为代价，因此不应作为web性能优化策略的一部分过度使用