合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。
合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。
在这方面,有两个关键因素会影响页面性能:需要管理的合成器层的数量以及您用于动画的属性。
摘要
- 坚持使用转换和不透明度更改来实现动画。
- 使用
will-change
或translateZ
提升移动的元素。 - 避免过度使用提升规则;各层都需要内存和管理开销。
对动画使用变形和不透明度更改
性能最佳的像素管道版本可以避免布局和绘制,并且只需要合成更改:
![无布局或绘制的像素管道。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-pixel-pipeline-no-la-96825803c8cec.jpg?authuser=6&hl=sv)
为了实现这一点,您需要坚持更改仅由合成器处理的属性。目前只有两个属性是 true,即 transform
和 opacity
:
![可在不触发布局或绘制的情况下为之添加动画效果的属性。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-properties-can-anima-100ed2c7d26a4.jpg?authuser=6&hl=sv)
使用 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 DevTools 中绘制分析器的切换开关。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-toggle-the-paint-pro-0bfd1048bb7de.jpg?authuser=6&hl=sv)
要了解应用中的层以及元素具有层的原因,您必须在 Chrome DevTools 的 Timeline 中启用绘制分析器:
开启此设置后,您应该进行录制。录制完成后,您将能够点击单个帧,这些帧位于每秒帧数栏和详细信息之间:
![开发者想要分析的帧。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/a-frame-developer-is-int-195784f471018.jpg?authuser=6&hl=sv)
点击此按钮后,您将获得一个新的详情选项:“layer”选项卡。
![Chrome DevTools 中的“Layer”标签页按钮。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-tab-button-chr-b74ebc86acad5.jpg?authuser=6&hl=sv)
此选项将打开一个新视图,您可以在其中平移、扫描和放大该帧中的所有图层,并说明每个图层的创建原因。
![Chrome DevTools 中的图层视图。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-view-chrome-de-04740f747ced7.jpg?authuser=6&hl=sv)
使用此视图可以跟踪您拥有的图层数。如果您在滚动或转场等关键性能操作期间花费大量时间进行合成(您应力争在 4-5 毫秒左右),那么您可以使用此处的信息了解有多少层、创建层的原因,并从该处管理应用中的层数。