避免使用未合成的动画

网页上的某些动画可以完全在渲染流水线的 compositor 阶段处理。

未合成的动画需要进行更多工作，并且在低端手机上或在主线程上运行性能密集型任务时，可能会出现卡顿（不流畅）问题。

非合成动画还会增加网页的累积布局偏移 (CLS)，因为它们会导致 CLS 算法衡量的元素发生实际移动，这可能会导致其他元素出现连锁偏移。合成动画不会导致其他元素发生位移，因此会从 CLS 中排除。降低 CLS 有助于提高 Lighthouse 性能得分。

背景

浏览器用于将 HTML、CSS 和 JavaScript 转换为像素的算法统称为渲染流水线。

渲染流水线由以下顺序步骤组成：JavaScript、样式、布局、绘制、合成。
渲染流水线。

即使您不了解渲染流水线的每个步骤的含义，也无妨。现在要重点了解的是，在渲染流水线的每个步骤中，浏览器都会使用上一步操作的结果来创建新数据。例如，如果您的代码执行了某些会触发布局的操作，则需要重新运行 Paint 和 Composite 步骤。非合成动画是指触发渲染流水线中较早步骤（样式、布局或绘制）的任何动画。非合成动画的性能较差，因为它们会迫使浏览器执行更多工作。

请参阅以下资源，深入了解渲染管道：

Lighthouse 如何检测非合成动画

如果无法合成动画，Chrome 会将失败原因报告给 DevTools 轨迹，Lighthouse 会读取该轨迹。Lighthouse 会列出未合成的动画的 DOM 节点，以及每个动画的失败原因。

如何确保动画合成

请参阅仅使用合成器属性并管理图层数量和高性能动画。

资源