GPU 加速 CSS 动画与 SVG 原生动画

Posted 2023-03-06

【中文标题】GPU 加速 CSS 动画与 SVG 原生动画

【英文标题】：GPU accelerated CSS animation vs SVG native animations

【发布时间】：2014-10-03 16:32:53

【问题描述】：

我的问题是，什么是更快的原生 SVG 动画标签，例如：

<path d="something very long and non-human-friendly">
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0" to="360" begin="0s" dur="3s" fill="freeze"
    repeatCount="indefinite" />
</path>

或 CSS 动画，例如：

path 
    animation: foo 3s ease-out infinite;


@keyframes foo 
    50% 
        transform: rotate(360);

也许最好使用 SVG 动画，因为 SVG 有更好的浏览器支持？

还相关：由于 CSS 转换触发硬件加速，我还想知道原生 SVG 动画标签是否也触发 GPU 加速或由浏览器绘制。如果没有，是否可以强制硬件对 SVG 原生动画进行控制？

干杯！

【问题讨论】：

它们都是一样的。 UA 通常有一个动画引擎，可以同时执行这两种动画。

注意：UA = 用户代理 = Web 浏览器。 @RobertLongson：我注意到 JS CSS 更新会导致速度较慢的 PC/平板电脑上的抖动，而 似乎更流畅。这是否意味着 JS 操作不使用动画引擎？

正确。它无法加速，因为 UA 不知道未来会发生什么。

@AlvinK。那么 CSS 转换是由 UA 执行的吗？我认为它们是硬件加速的。我有一个带有 SVG 的页面，它使用 SVG 标签在其中设置一条路径的动画，然后在页面下方，我有一个使用 CSS 转换动画的 div：translate。没有 JS。当我滚动页面时，当我到达 SVG 时它会减慢一点绘画速度，但当我到达 div 时它会正常滚动。这就是为什么我问，如果 SVG 标签更慢或者不能被硬件加速，我打算用 CSS 转换来动画化 SVG 内部的路径。 PS。 SVG 不是 DOM 的一部分，它作为外部图像嵌入。

@RobertLongson：通常说包含<animate> 的外部SVG 是由动画引擎渲染的吗？虽然我注意到带有“动画”标签的嵌入式 SVG 确实在 UA 上运行得更快，但无法通过源代码进行确认。

【参考方案1】：

截至 2019 年，情况仍然很不明朗。

在所有情况下，性能都有了很大的发展。

在高负载时，为了避免界面滞后，在大量使用 javascript 引擎时，我发现 SVG 在加载和渲染时比 css 动画更快，并且在调整窗口大小或缩放。还针对js动画画布。

本机动画 svg 和 js 动画 svg 都是这种情况。

这真的取决于设备。

不管怎样，这一切都不是固定的。当我在 Linux 上开发时，发现我的应用在其他一些相同类型的机器上运行更流畅。

这有一个悲哀的解释，仍然在 Linux/Firefox 66 默认禁用 GPU 加速。通过在 about:config 中启用，渲染和 cpu 使用的性能提升到另一个世界。

在 about:config 中，将以下条目切换为 true：

layers.acceleration.force-enabled

不确定为什么默认禁用它，可能只是许可证问题。这显示了未来改进的剩余空间。

https://community.chakralinux.org/t/how-to-enable-opengl-compositing-in-firefox-for-a-smoother-browsing-experience-with-less-cpu-usage/7543

对于 Linux/chromium，这也是默认禁用的，这需要启用大量操作：

https://www.linuxuprising.com/2018/08/how-to-enable-hardware-accelerated.html

【参考方案2】：

正如其他人指出的那样，性能取决于执行的软件。尽管如此，知道（正如 JGM.io 所写的）JS 动画被认为提供比 CSS3 动画更高的性能可能会有所帮助。

除了 GSAP 之外，还有一个名为 velocity.js 的动画库，它支持 SVG 动画。以下文章简要介绍了使用velocity.js 制作SVG 动画的原因，以及为什么它比https://davidwalsh.name/svg-animation 的替代品更好（由velocity.js 的创建者Julian Shapiro 撰写）。

因此，如果您的目标是在浏览器/webview/e 中实现最高性能和兼容性，我建议您使用像velocity.js 这样的js 动画库。但也要考虑到性能并不是这种选择的唯一指标。到目前为止，我对velocity.js 的体验非常积极，但是通过选择一个库，您的工作将始终依赖于它。

【参考方案3】：

由于我的多平台 Phonegap 应用程序出现性能问题，为了简单起见，我阅读了大量有关此主题的内容：

没有人真正知道哪些 CSS 是通用硬件加速的，因为标准实现是碎片化的，看起来 ios 是 CSS 硬件加速的领导者，但你想将最佳体验限制在 market share 上吗？

最后我遇到了this 文章，它试图解释 JS 解决方案具有更好的兼容性和performance。同时添加 CSS 无法实现的功能。 请记住，这两篇文章都是由 GSAP 的创建者撰写的，因此存在偏见，但在尝试过之后我被说服了。

上述文章的更详细版本可以在here找到。

【讨论】：

我目前正在做一个同时使用 GSAP 和 CSS 动画的项目。使用 Chrome 作为参考，GSAP 在帧率和 CPU 效率方面都大大优于 CSS 动画，但前提是场景中的所有动画都是 GSAP 并且我们为 GSAP 手动指定了帧率（但请注意，我们还没有使用 GSAP 3）。这让我很震惊，也很失望，但差别很大。如果可以并且性能是一个问题，我建议尽可能使用 GSAP 并避免使用 CSS 动画。

【参考方案4】：

目前，似乎还没有关于这个话题的完整答案。

我四处寻找更多信息，答案通常取决于您使用 SVG 的哪种实现方式（嵌入、内联）以及您选择支持的浏览器。

一般来说，浏览器的开发人员倾向于将他们的工作集中在 CSS3 优化而不是 SVG 优化上，因为第一个优化的使用频率更高。

在这个简单的Wikipedia page 中，您可以找到有关当前状态的一些示例和其他详细信息，而Mozilla developer center 上的此页面突出了由于使用CSS transform 而由GPU 加速的转换的不同性能。