在低端手机上，或当主线程上运行高性能任务时，非合成动画可能会出现卡顿（即不流畅）。卡顿的动画会提高页面的 Cumulative Layout Shift (CLS)。降低 CLS 将提高 Lighthouse Performance 得分。
背景
浏览器的用来将 HTML、CSS 和 JavaScript 转换为像素的算法统称为渲染流水线。
如果您不了解渲染流水线每个步骤的含义，那也没关系。现在要了解的重点是，在渲染流水线的每一步，浏览器都使用上一个操作的结果来创建新数据。例如，如果代码执行一些触发“布局”的操作，则“绘制”和“合成”步骤需要再次运行。非合成动画是触发渲染流水线较早步骤之一（“样式”、“布局”或“绘制”）的动画。非合成动画的性能更差，因为它们迫使浏览器做更多工作。
查看以下资源以深入了解渲染流水线：
Lighthouse 如何检测非合成动画
当动画无法合成时，Chrome 会将失败原因报告给 DevTools 跟踪，Lighthouse 会进行读取。Lighthouse 将列出具有未合成动画的 DOM 节点以及每个动画的失败原因。
如何确保合成动画
请参阅坚持仅合成器的属性和管理层计数和高性能动画。
资源
Published on • 改进文章