摘要：Chromium 自动更新了其硬件加速功能，可支持 SVG 动画、基于百分比的转换，很快还将支持背景色和裁剪路径动画。
谈到网页动画性能，可能会出现“硬件加速”和“GPU 加速”动画这两个术语。但这些都意味着什么呢？硬件加速样式是指利用 GPU（图形处理器）而非 CPU（中央处理器）呈现视觉样式的样式。这是因为 GPU 在网页上呈现视觉变化的速度比 CPU 更快。
使用 GPU 分流图形密集型转场和动画可以实现更流畅的视觉效果并减少卡顿，因为这些动画不受主线程的影响。将动画从主线程中提取出来后，会绕过页面上运行的其他活动脚本的外层，这会减慢视觉呈现速度并造成卡顿。
启用硬件加速动画
硬件加速的动画以层的形式合成，可帮助开发者实现流畅的 60 FPS（每秒帧数）动画，从而提升视觉渲染性能。目前，您可以通过以下几种方式在网页上指定和启用硬件加速的动画和转场效果：
- 使用 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 上显示的元素。当用户等待响应时，这些指示器会提示服务器上正在执行的工作。如此处所示，响应会在边栏中加载其他结果。
打开开发者工具后，我们可以开始分析并真正查看 CPU 和 GPU 加速的动画体验之间的差异。
您可以发现，在左侧 (Chromium 87) 中，每当旋转图标以动画方式（持续）时，都会进行重绘。右侧没有重新绘制（Chromium 89 和 Firefox）。开启“绘制刷”后，我们可以在开发者工具“渲染”面板中对此进行测试。
仔细查看“效果”面板，您可以再次看到这种影响，以及它对网站媒体资源整体效果的影响。您可以完全避免动画的渲染和绘制时间，这意味着动画会更流畅，应用的性能更高。虽然 Facebook 在浏览器对硬件加速 SVG 的支持力度加大之前，无法发布这个基于 SVG 的加载器，但它可以在主题、扩缩和分辨率要求方面提供更大的灵活性，并且更易于维护。
百分比动画
Interactions 团队还在 Chromium 89 中提供对百分比转换动画的支持。基于百分比的动画描述包含基于百分比的移动的互动。例如，您可以将某项内容放大 20%，或者使用 translateX: -100% 等命令将自适应边栏菜单从屏幕外滑动。
这些类型的界面动画相对常见，但目前未利用硬件加速，因为之前我们无法合成此类动画。转换中的百分比取决于框大小（即布局），但现在，只要布局大小不会更改每一帧，浏览器就可以预先计算绝对转换值，并像开发者提供像素值一样运行它们。好消息是 Chromium 团队正在开发此功能，这些类型的动画很快会自动进行合成和硬件加速。
接下来会发生什么？
这些更新后的动画会让网页样式更流畅。如上所述，该团队一直在想看看未来会出现什么网络需求。目前，我们计划将 background-color 和 clip-path 转换为在未来版本的 Chromium 中自动使用硬件加速。
background-color 具有较高的转换和效果使用计数，因此具有优先级，而 clip-path 可在整个网络上实现性能更高的转换效果。只要性能与互动性强强联合，便可实现双赢！
封面图片：Unsplash 用户 Siora Photography。