| layout | title | description | date |
|---|---|---|---|
layouts/doc-post.njk |
避免非合成动画 |
如何通过“避免非合成动画”Lighthouse 审计。 |
2020-08-12 |
在低端手机上，或当主线程上运行高性能任务时，非合成动画可能会出现卡顿（即不流畅）。卡顿的动画会提高页面的 Cumulative Layout Shift (CLS)。降低 CLS 将提高 Lighthouse Performance 得分。
浏览器的用来将 HTML、CSS 和 JavaScript 转换为像素的算法统称为渲染流水线。
{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/68xt0KeUvOpB8kA1OH0a.jpg", alt="渲染流水线包含以下顺序步骤：JavaScript、样式、布局、绘制、合成。", width="800", height="122 "%} 渲染流水线。如果您不了解渲染流水线每个步骤的含义，那也没关系。现在要了解的重点是，在渲染流水线的每一步，浏览器都使用上一个操作的结果来创建新数据。例如，如果代码执行一些触发“布局”的操作，则“绘制”和“合成”步骤需要再次运行。非合成动画是触发渲染流水线较早步骤之一（“样式”、“布局”或“绘制”）的动画。非合成动画的性能更差，因为它们迫使浏览器做更多工作。
查看以下资源以深入了解渲染流水线：
当动画无法合成时，Chrome 会将失败原因报告给 DevTools 跟踪，Lighthouse 会进行读取。Lighthouse 将列出具有未合成动画的 DOM 节点以及每个动画的失败原因。
请参阅坚持仅合成器的属性和管理层计数和高性能动画。