硬件加速

又叫 GPU 加速，创建独立的复合图层，让GPU来渲染这个图层，不会触发重绘，从而提高性能

硬件加速如何工作的

页面解释成DOM输。DOM树和CSS让浏览器构建渲染树。渲染树包含渲染对象
在页面中需要渲染的元素。每一个渲染对象被分配到一个图层中。每一个图层被更新到GPU，通过transform的层会使用GPU渲染，因此不需要重绘，就像3D图形一样。这个转换是单独处理的。

硬件注意问题

不是所有元素都硬件
若不在动画关闭硬件加速，会让字体模糊

提升合成层好处

合成层的位图，会交由 GPU 合成，比 CPU 处理要快（GPU 上合成图层可以在涉及大量像素的绘图和合成操作中实现比 CPU（无论是在速度和功耗方面）还要好的效率。硬件专为这些类型的工作负载而设计， GPU 上的内容不需要昂贵的回读， CPU 和 GPU 之间的并行性，可以同时运行以创建高效的图形管道）
当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
元素提升为合成层后，transform 和 opacity 才不会触发 paint，如果不是合成层，则其依然会触发 paint

常见的提升为合成层的属性

will-change: transform; // opacity、transform、top、left、bottom、right
transform: translateZ(0); // 对于个别不支持的浏览器
video、canvas、iframe 等元素。

隐式合成

一个动画元素A被另一个元素B改在上了，A动画元素是合成层，为了避免A提升到合成层被B 盖住，会把B也提升到合成层。
一个或多个非合成元素应出现在堆叠顺序上的合成元素之上，会被提升为合成层。

层爆炸

不符合预期的合成层达到一定数量的时候，就会变成层爆炸，添加 z-index 提升元素层级，避免其他元素的隐式合成

层压缩

浏览器优化层爆炸，将多个层进行压缩成一个层，然而浏览器的自动层压缩并不是万能的，有很多特定情况下，浏览器是无法进行层压

硬件加速的坑

不要把所有东西一股脑儿抛给 GPU 问题在于 GPU 并没有无限制处理性能，而且一旦资源用完的话，性能就会开始下降了（即使 CPU 并没有完全占用）。事实上他们有自己的职责，各司其职，各尽其才，才能发挥出更大的作用。
减小合成层的尺寸, 因此对于一些纯色图层来说，我们可以使用 width 和 height 属性减小合成层的物理尺寸，然后再用 transform: scale(…) 放大，这样一来可以极大地减少层合成带来的内存消耗。

如何查看合成层

Rendering Show layer borders

参考

https://juejin.cn/post/6844903966573068301 https://fed.taobao.org/blog/2016/04/26/performance-composite/