合成（Compositing）是将页面的绘制部分放在一起，以便在屏幕上显示。
在这个领域有两个影响页面性能的关键因素：需要管理的合成层的数量，以及用于动画的属性。
- 坚持为你的动画应用
transform和opacity - 使用
will-change或transllateZ促进移动元素。 - 避免过度使用提升规则；合成层需要内存和管理。（过度使用会消耗大量内存的意思）
为你的动画使用transform和opacity
像素渲染管线的最佳性能版本避免了布局（layout）和绘制（paint），只需要进行合成更改
为了实现这一点，你需要保证改变属性能够被合成器单独处理，今天只有两个属性 —— transforms 和 opacity：
使用transform和opacity的注意事项是，您更改这些属性的元素应位于其自己的合成器层上。 为了生成一个图层，您必须提升元素，我们将在接下来介绍。
如果您担心可能无法将动画限制为这些属性，那么可以看看FLIP principle，它可以帮助您将动画重新映射到从更昂贵的属性中转换和不透明度的变化。
提升你计划应用动画的元素
正如我们在“简化绘制复杂性并减少绘制区域”部分中提到的那样，您应该将您计划应用动画的元素（在合理范围内，不要过度使用它！）提升到它们自己的图层：
.moving-element {
will-change: transform;
}
或者，对于较旧的浏览器，或者不支持 will-change 的浏览器：
.moving-element {
transform: translateZ(0);
}
管理图层并避免图层爆炸
因此，在知道图层通常有助于性能的情况下，你可能很容易使用以下方式来提升页面上的所有元素：
* {
will-change: transform;
transform: translateZ(0);
}
这是一种委婉的说法，表示您希望提升页面上的每一个元素。这里的问题是，您创建的每个图层都需要内存和管理，而这（内存和管理）并不是免费的。事实上，在内存有限的设备上，对性能的影响可能远远超过创建一个图层所带来的好处。每一层的纹理都需要上传到GPU上，所以在CPU和GPU之间的带宽和GPU上可供纹理使用的内存方面有进一步的限制。
注意：不要提升不必要的元素
在你的web应用上使用Chrome DevTools来了解图层（layers）
要了解应用程序中的layers，以及为什么元素有一个layers，你必须在Chrome DevTools的Timeline面板中启用Paint profiler：
提示：截止本文章发布的时间点，最新的chrome版本，
Timeline面板已更改为Performance面板
开启此功能后，你应该进行录制（Record），录制完成后，你才能够点击单个帧（frame），该帧位于每秒帧数条和详细信息之间：
点击它，在详细信息中为你提供了一个新选项：图层选项卡
提示：在最新的chrome版本，图层（layers）选项卡，已移动到
More Tools中的layers选项了
此选项将打开一个新视图，允许您在该帧期间平移、扫描和放大所有图层，以及创建每个图层的原因。
使用此视图，您可以跟踪您拥有的层数。 如果您在scrolling或transitions等性能关键操作期间花费大量时间进行合成（您的目标应该是大约 4-5 毫秒），您可以使用此处的信息来查看您有多少层、创建它们的原因，以及从哪里管理您的应用程序中的层数。
资源
【原文】：Stick to Compositor-Only Properties and Manage Layer Count
