GPU加速的CSS动画与SVG本地动画

Question

我的问题是，哪种更快，是原生的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本地动画开启硬件加速？

干杯！

- Xirux Nefer

---

它们是一样的。通常，UA具有一个动画引擎，可以执行两种类型的动画。 - Robert Longson

注意：UA = 用户代理 = Web浏览器。@RobertLongson：我注意到JS CSS更新可能会导致较慢的PC /平板电脑上出现不流畅的动画，而<animate>似乎更加流畅。这是否意味着JS操作不使用动画引擎？ - Alvin K.

@RobertLongson：一般来说，包含<animate>的外部SVG是由动画引擎渲染的，这种情况需要通过源代码确认才能确定。不过我注意到，带有“animate”标签的嵌入式SVG在UA上运行速度更快。 - Alvin K.

这篇文章似乎是一篇相关而深入的阅读 - http://www.useragentman.com/blog/2012/09/23/cross-browser-gpu-acceleration-and-requestanimationframe-in-depth/这篇文章也提供了一些与您的问题相关的有趣信息 - http://blogs.msdn.com/b/ie/archive/2011/03/08/comparing-hardware-accelerated-svg-across-browsers-with-santa-s-workshop.aspx - Frankie Loscavio

有一件事是确定的。它们在UA中被不同对待，至少在Chrome/Safari中。https://jsbin.com/wodenoxaku/1/edit?html,css,output - noru

Answer 1

我在我的跨平台Phonegap应用中遇到了性能问题，因此在这个主题上进行了大量阅读。简单地说：

没有人真正知道哪些CSS是普遍硬件加速的，因为标准的实现是分散的，看起来iOS在CSS硬件加速方面处于领先地位，但你想要将最佳体验限制在市场份额吗？

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

可以在这里找到更详细的版本。

- JGM.io

---

我目前正在开发一个项目，其中使用了GSAP和CSS动画。以Chrome为参考，GSAP在帧率和CPU效率方面远远优于CSS动画，但前提是场景中的所有动画都是GSAP，并且我们手动为GSAP指定了帧率（请注意，我们尚未使用GSAP 3）。这对我来说非常震惊，也是一个巨大的失望，因为差距非常大。如果您可以并且性能是一个问题，我建议尽可能使用GSAP并避免使用CSS动画。 - Ignacio Segura

Answer 2

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

我查找了更多信息，答案往往取决于您使用的SVG实现方式（嵌入式、内联式）以及选择支持的浏览器。

一般来说，浏览器开发人员倾向于集中精力优化CSS3而不是SVG，因为前者的使用更加频繁。

在这个简单的维基百科页面上，您可以找到一些示例和其他有关当前状态的详细信息，而Mozilla开发者中心上的这个页面则强调了由于使用CSS transform而加速过渡的不同性能。

- Luca Detomi

Answer 3

正如其他人所指出的，性能取决于执行软件。然而，了解到（正如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的体验非常积极，但是通过选择库，您的工作将始终依赖于它。

- JepZ

Answer 4

截至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

- NVRM