摘要:Chromium 正在自动更新其 SVG 动画、基于百分比的转换以及背景颜色和剪裁路径动画的硬件加速功能。
谈到 Web 动画性能时,我们可能会提到“硬件加速”和“GPU 加速”动画。但这些是什么意思?硬件加速的样式是指利用 GPU(图形处理器)而非 CPU(中央处理器)来渲染视觉样式的样式。这是因为 GPU 比 CPU 更快地渲染网页上的视觉变化。
使用 GPU 来分流图形密集的转场和动画意味着视觉效果更流畅,卡顿减少,因为这些动画不受主线程的影响。通过将动画从主线程中移除,动画可以绕过网页上运行的其他活动脚本,这些脚本会降低视觉效果并导致卡顿。
启用硬件加速动画
硬件加速动画会作为图层合成,可帮助开发者实现流畅的 60 FPS(每秒帧数)动画,从而提升视觉呈现性能。目前,您可以通过多种方式在 Web 上指定和启用硬件加速的动画和转场效果:
- 使用 CSS
transform
函数或转换opacity
或filter
值 - 将
will-change
属性添加到元素中。 - 通过
OffscreenCanvas
创建动画画布绘制 - 创建 WebGL 3D 绘图
opacity
、filter
和 transform
,但 background-color
和 clip-path
很快也会加入该列表。在 Chromium 中,还有哪些功能默认采用硬件加速?我们即将推出一些功能,包括 SVG 动画,这是开发者一直在请求的功能。
硬件加速 SVG 动画
SVG 是任何网站的绝佳补充,现在,与 SVG 的互动性能可以得到进一步提升。从 Chromium 89 开始,Chrome 将与 Firefox 等浏览器一样,默认为 SVG 动画启用硬件加速。开发者需要做些什么?无需执行任何操作 - 此属性将自动应用于 Chromium 89 及更高版本中的 SVG 动画。
示例
我们来看看启用和不启用硬件加速的 SVG 动画之间的区别。加载指示器是常用的界面元素,例如 facebook.com 上显示的此指示器。这些指示器会在用户等待响应时提示服务器正在执行的工作。在本例中,响应是将其他结果加载到边栏中。
打开 DevTools 后,我们就可以开始进行性能分析,真正了解 CPU 和 GPU 加速动画体验之间的差异。

您可以看到,在左侧(Chromium 87)中,每次旋转图标进行动画处理(持续进行)时都会发生重新绘制。右侧没有重新绘制(Chromium 89 和 Firefox)。我们可以在 DevTools 的“渲染”面板中开启“绘制闪烁”功能来测试这一点。

仔细查看“效果”面板,您可以再次看到这种影响,以及它对网站媒体资源的整体效果有何影响。您可以完全避免动画的渲染和绘制时间,从而获得更流畅的动画和更高性能的应用。在浏览器对硬件加速 SVG 的支持度提高之前,Facebook 无法发布此基于 SVG 的加载器,但它在主题设置、缩放和分辨率要求方面会更灵活,并且更易于维护。
百分比动画
互动团队还将在 Chromium 89 中提供对百分比转换动画的支持。基于百分比的动画用于描述包含基于百分比的移动的互动。例如,您可以将某个内容放大 20%,或使用 translateX: -100%
等内容从屏幕外滑动出响应式边栏菜单。
这类界面动画比较常见,但目前无法利用硬件加速,因为我们之前无法合成此类动画。转换中的百分比取决于盒子大小(即布局),但现在,只要布局大小不会在每一帧中发生变化,浏览器就可以预先计算绝对转换值,并像开发者提供像素值一样运行这些值。好消息是,Chromium 团队正在开发此功能,很快,这类动画将自动进行合成和硬件加速。
后续步骤
这些经过更新的动画将使 Web 样式更加流畅。正如前面所提到的,该团队始终在关注即将出现的 Web 需求。目前,我们计划在未来的 Chromium 版本中将 background-color
和 clip-path
转换为自动使用硬件加速。
background-color
因其在转场效果和特效方面的使用量较高而被列为优先级,而 clip-path
可在 Web 上实现性能更出色的转场效果。将效果与互动性相结合,多方共赢!
封面图片:Unsplash 的 Siora Photography。