合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。
合成是将页面的已绘制部分放在一起 显示在屏幕上。
此区域有两个影响页面性能的关键因素：需要管理的合成器层的数量和用于动画的属性。
摘要
- 坚持使用 transform 和 opacity 属性更改来实现动画。
- 使用
will-change或translateZ提升移动的元素。 - 避免过度使用促销规则；都需要内存和管理。
对动画使用转换和不透明度更改
性能最佳的像素管道版本会避免布局和绘制，只需要合成更改：
为了实现这一点，您需要坚持更改可以由合成器单独处理的属性。目前只有两个属性是正确的，即 transform 和 opacity：
使用 transform 和 opacity 时需要注意的是，您更改这些属性所在的元素应位于自己的合成器层上。要创建层，您必须提升元素，我们稍后将对此进行介绍。
提升您打算添加动画效果的元素
正如我们在“降低绘制的复杂性并减少绘制区域”一文中所述部分，应将您打算添加动画效果的元素提升到其自己的层（在合理范围内，不要过头！）
.moving-element {
will-change: transform;
}
或者，对于旧版浏览器或不支持 will-change 的浏览器：
.moving-element {
transform: translateZ(0);
}
管理图层并避免图层数量激增
层通常有助于性能，因此您可能会非常想通过以下代码来提升网页上的所有元素：
* {
will-change: transform;
transform: translateZ(0);
}
这是一种环形方式，表示您想要提升页面上的每个元素。这里的问题在于，您创建的每一层都需要内存和管理，而这并不是免费的。事实上，在内存有限的设备上，对性能的影响可能远远超过创建层带来的任何好处。每一层的纹理都需要上传到 GPU，因此在 CPU 和 GPU 之间的带宽以及 GPU 上可用于纹理的内存方面，存在进一步的限制。
使用 Chrome 开发者工具了解应用中的层
如需了解应用中的层，以及元素为何有层，您必须在 Chrome 开发者工具中启用绘制分析器时间安排：
开启此选项后，您应该进行录制。录制完成后，您将能够点击各个帧，这些帧位于每秒帧数条形之间，详情如下：
点击此按钮后，您会看到一个新的详情选项：“layer”选项卡。
此选项将调出一个新视图，可让您在该帧期间平移、扫描和放大所有图层，并说明创建每个图层的原因。
您可以使用此视图跟踪所拥有的图层数量。如果您在滚动或过渡等性能关键型操作期间花费了大量时间进行合成（应以大约 4-5 毫秒为目标），则可以使用此处的信息了解您有多少层、创建层的原因，并从此处管理应用中的层数。