摘要：Chromium 正在自动更新 SVG 动画、基于百分比的转换，以及背景颜色和裁剪路径动画的硬件加速功能。
当谈到 Web 动画性能时，很可能会出现“硬件加速”和“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）。启用“Paint flashing”时，我们可以在开发者工具的“Rendering”面板中对此进行测试。
仔细查看“性能”面板，您可以再次看到这种效果及其对网络媒体资源的整体效果的影响。您可以完全避免动画的渲染和绘制时间，从而实现更流畅的动画和更高性能的应用。虽然在浏览器更好地支持硬件加速的 SVG 之前，Facebook 不会提供这种基于 SVG 的加载器，但这会在主题、缩放和分辨率要求方面提供更大的灵活性，并简化维护工作。
百分比动画
Interactions 团队还将在 Chromium 89 中支持百分比转换动画。基于百分比的动画描述了包含基于百分比的移动的互动。例如，您可以将某些内容放大 20%，或使用 translateX: -100% 等元素从屏幕外滑动自适应边栏菜单。
这些类型的界面动画相对常见，但目前未利用硬件加速，因为以前我们无法合成此类动画。转换中的百分比取决于框大小（即布局），但现在，只要布局大小不会改变每一帧，浏览器就可以预先计算绝对转换值，并像开发者提供了像素值一样运行这些值。好消息是，Chromium 团队正在开发此功能，很快，这些类型的动画将自动合成并进行硬件加速。
接下来会发生什么？
这些更新后的动画会使网页样式设置变得更加流畅。如上所述，团队一直在期待看到未来的网络需求出现什么。目前，我们计划将 background-color 和 clip-path 转换为在未来的 Chromium 版本中自动使用硬件加速。
background-color 具有较高的优先级，因为它可以用来实现转换和效果的大量使用，而 clip-path 可以在网络上实现性能更高的转换效果。如果性能与互动相结合，就能实现双赢！
封面图片：Unsplash 的 Siora Photography。