Skip to content
学习 衡量 博客 Case studies 关于
Join and donate to 🇺🇦 DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
本页内容
  • Lighthouse 如何检测非合成动画
  • 如何确保合成动画
  • 资源

避免非合成动画

Aug 12, 2020
Available in: Español, 日本語, 한국어, Português, Русский, English
Appears in: 性能审核
本页内容
  • Lighthouse 如何检测非合成动画
  • 如何确保合成动画
  • 资源

在低端手机上,或当主线程上运行高性能任务时,非合成动画可能会出现卡顿(即不流畅)。卡顿的动画会提高页面的 Cumulative Layout Shift (CLS)。降低 CLS 将提高 Lighthouse Performance 得分。

背景 #

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

渲染流水线包含以下顺序步骤:JavaScript、样式、布局、绘制、合成。
渲染流水线。

如果您不了解渲染流水线每个步骤的含义,那也没关系。现在要了解的重点是,在渲染流水线的每一步,浏览器都使用上一个操作的结果来创建新数据。例如,如果代码执行一些触发“布局”的操作,则“绘制”和“合成”步骤需要再次运行。非合成动画是触发渲染流水线较早步骤之一(“样式”、“布局”或“绘制”)的动画。非合成动画的性能更差,因为它们迫使浏览器做更多工作。

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

  • 深入了解现代 Web 浏览器(第 3 部分)
  • 简化绘制的复杂度、减小绘制区域
  • 坚持仅合成器的属性和管理层计数

Lighthouse 如何检测非合成动画 #

当动画无法合成时,Chrome 会将失败原因报告给 DevTools 跟踪,Lighthouse 会进行读取。Lighthouse 将列出具有未合成动画的 DOM 节点以及每个动画的失败原因。

如何确保合成动画 #

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

资源 #

  • 避免非合成动画审计的源代码
  • 坚持仅合成器的属性和管理层计数
  • 高性能动画
  • 简化绘制的复杂度、减小绘制区域
  • 深入了解现代 Web 浏览器(第 3 部分)
Last updated: Aug 12, 2020 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 网站开发基础
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.