避免使用未合成的动画
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
未合成的动画在低端手机上或在主线程上运行性能较高的任务时可能会出现卡顿(不流畅)。动画卡顿会增加网页的 Cumulative Layout Shift (CLS)。降低 CLS 将提高 Lighthouse 性能得分。
背景
浏览器用于将 HTML、CSS 和 JavaScript 转换为像素的算法统称为渲染管道。
如果您不了解渲染管道的每个步骤的含义,也没有关系。您现在需要了解的关键一点是,在渲染流水线的每一步,浏览器都会使用上一次操作的结果来创建新数据。例如,如果您的代码执行了触发布局的操作,那么绘制和合成步骤需要再次运行。未合成的动画是触发渲染流水线中某个先前步骤(样式、布局或绘制)的动画。非合成动画的性能较差,因为它们会强制浏览器执行更多工作。
查看以下资源以深入了解渲染流水线:
Lighthouse 如何检测未合成的动画
当动画无法合成时,Chrome 会向开发者工具跟踪记录报告失败原因,这也是 Lighthouse 读取的内容。Lighthouse 列出了具有未合成动画的 DOM 节点以及每个动画的失败原因。
如何确保动画已合成
请参阅坚持仅使用合成器的属性和管理层计数和高性能动画。
资源
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2020-08-12。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2020-08-12\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2020-08-12。"],[],[]]