合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。
合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。
此方面有两个关键因素影响页面的性能：需要管理的合成器层数量，以及您用于动画的属性。
摘要
- 坚持使用 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 开发者工具的时间轴中启用绘制分析器：
开启此选项后，您应该进行录制。录制结束后，您将能够点击单个帧，这些帧位于 FPS 柱形之间，细节如下：
点击此处将为您提供一个新的详情选项：“layer”标签页。
此选项将调出新的视图，使您能够平移、扫描和放大该帧中的所有层，并了解每层被创建的原因。
您可以使用此视图来跟踪所用的层数。如果您在滚动或变换之类的性能关键型操作期间花了很多时间在合成上（应当力争在 4-5 毫秒左右），则可以使用此处的信息来查看您有多少层，为何创建了层，并从此处管理应用中的层数。