合成是将页面的绘制部分放在一起以显示在屏幕上的地方。
有两个影响页面性能的关键因素：需要管理的合成器层数，以及用于动画的属性。
先上结论：
1，在写动画时坚持使用 transform 和 opacity；
2，使用 will-change 或 translateZ 提升动画元素；
3，避免过度使用提升规则，层需要内存和管理。
在写动画时坚持使用 transform 和 opacity
性能最佳的像素管道版本会避免布局和绘制，只需要合成更改；
为了实现此目标，需要坚持更改可以由合成器单独处理的属性。目前只有两个属性符合条件: transform 和 opacity。
使用 transform 和 opacity 时需要注意，更改这些属性的元素应该在自己的合成层上。为了创建层，你必须提升元素，我们将在接下来介绍。
如果还想使用其他属性写动画，请查看FLIP 原则 或者 这篇，它可以帮助将比较小好性能的动画重新映射为性能开销较小的 transform 和 opacity。
使用 will-change 或 translateZ 提升动画元素
你需要把动画元素提升到它们自己的合成层，注意：需要有合理理由，不要过度使用；
.moving-element {
will-change: transform;
}
will-change可以提前警示浏览器即将出现更改，根据你打算更改的元素，浏览器可能可以预先安排，如创建合成器层。
真的较旧的浏览器，可能不支持 will-change，使用下面的代码：
.moving-element {
transform: translateZ(0);
}
管理层，避免层爆炸
有些开发者知道层通常有助于提高性能后，可能很想通过以下方式提升页面上的所有元素：
* {
will-change: transform;
transform: translateZ(0);
}
创建的每一层都需要内存和管理，在内存有限的设备上，对性能的影响远远超过创建层的任何好处。每一层的纹理都需要上传到 GPU，因此在 CPU 和 GPU 之间的带宽以及 GPU 上可用于纹理的内存方面存在进一步的限制。
所以，对没必要的元素不要进行提升。
使用Chrome DevTools 来理解层
如图所示，开启layers；
全文完。
参考文章
