避免使用未合成的动画

未合成的动画在低端手机上或在主线程上运行性能较高的任务时可能会出现卡顿（不流畅）。动画卡顿会增加网页的 Cumulative Layout Shift (CLS)。降低 CLS 将提高 Lighthouse 性能得分。

背景

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

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

如果您不了解渲染管道的每个步骤的含义，也没有关系。您现在需要了解的关键一点是，在渲染流水线的每一步，浏览器都会使用上一次操作的结果来创建新数据。例如，如果您的代码执行了触发布局的操作，那么绘制和合成步骤需要再次运行。未合成的动画是触发渲染流水线中某个先前步骤（样式、布局或绘制）的动画。非合成动画的性能较差，因为它们会强制浏览器执行更多工作。

查看以下资源以深入了解渲染流水线：

Lighthouse 如何检测未合成的动画

当动画无法合成时，Chrome 会向开发者工具跟踪记录报告失败原因，这也是 Lighthouse 读取的内容。Lighthouse 列出了具有未合成动画的 DOM 节点以及每个动画的失败原因。

如何确保动画已合成

请参阅坚持仅使用合成器的属性和管理层计数和高性能动画。

资源