3.6 向 60 fps 进发（二）：Composite 优化 与 Painting 优化

[EthanLin-TWer]

painting 是性能最大的杀器。80%原则应该先寻找这部分的优化。

这个 Layer 的概念模型，感受一下。通过把不同的内容放在不同的「层」，从而渲染时只需要「平移、覆盖」过去，而不需要擦除原来的全部重画。技术上，如何实现不同的「层」呢？如何有划分不同的层呢？如何 profile 层带来的 painting 方面的影响呢？

技术上，有很多手段可以「告诉浏览器为元素创建独立的层」，比如一些 CSS 元素的应用（position: absolute/relative、visibility、transform 等）。从底层实现原理来看，最终是通过 z-index 来区分，具体数值无所谓，只要可以表达「大小」和「相等」关系即可。

will-change: transform 适用于你有很多元素的「移动」、「位置变换」等情形，为每个元素创建自己的一个层，不会导致整个画面重绘。目测可以节省大量的效率。

当然，每多用一个层，会增加浏览器的 RAM 内存和性能等开销，与之节省的 repaint 开销相比，是否值得，就是一个值得权衡的问题了。

目标是：Painting 2ms，Composite Layers 2ms。

• https://www.youtube.com/watch?v=QU1JAW5LRKU
• https://www.html5rocks.com/en/tutorials/speed/layers/
• https://www.oschina.net/translate/chrome-accelerated-rendering
• https://dev.opera.com/articles/css-will-change-property/