CSS动画比JS动画更快吗？

Question

我曾经阅读过一篇文章，说CSS动画比JS动画更快。在使用jQuery进行动画时，我可以理解为什么有些人会这么说，因为jQuery动画有时候会出现错误和变慢。然而，我想知道的是这个观点是否有任何严格的证据支持？

- Luke Madhanga

Answer 1

有一个普遍的误解，认为CSS动画比JS动画更快，因为每当提起这个话题时都会使用一些高大上的词汇。但实际上，CSS动画比jQuery动画要快得多，也更加稳定，这就是许多人认为这样的原因。如果您看一下GreenSock库（这个名字应该会唤起老Flash WebDevs的回忆 :v），它比jQuery快得多，而且与CSS动画相媲美。

如果您浏览这个网站并向下滚动到“性能比较”部分，您将看到一个压力测试，这确实是我刚才所说的一切的基础。我在一台拥有Intel Core i7 3930K 3.2GHz处理器和8GB内存的机器上运行了这个测试（无法确定GPU）。

在运行测试时，请确保将点设置为3000，并对所有三个引擎运行测试。

• jQuery引擎只能渲染单个点
• GreenSock引擎远远最流畅
• CSS引擎效果不错，但似乎没有GSAP引擎流畅

显然，如果有人对测试和提供的信息持不同意见，请说明理由并提供参考数据。

- Luke Madhanga

---

正如css-tricks.com的文章所指出的那样，可能不能准确地说哪一个总是比另一个更快 - 这取决于情况。但在许多情况下JavaScript肯定会更快（根据我的经验，更多情况下），而有时候CSS可能会更快，这取决于设备和JS的编写方式。CSS将优于编写不良的JS，但高效的JS通常可以超越CSS，就像GSAP一样。显然，JavaScript更加灵活，您可以获得更好的控制和兼容性。当然，我是GSAP的铁杆[完全偏袒]粉丝。我的建议：测试，测试，测试。 - Jack

Answer 2

我最近在研究这个问题，发现答案现在更加微妙了。

JS动画库主要使用requestAnimationFrame，这会阻止它们利用硬件加速。

实际上，这意味着即使你的动画只使用transform和opacity，每一帧仍然会有CPU工作。

如果你的CPU被限制，那么这将导致JS动画比CSS动画慢。有一个新的动画API（WAAPI）可以进行硬件加速，但大多数主流动画库目前还没有使用它。

我在创建一篇博文时发现了这一点，该博文比较了不同的侧边栏动画。

• 这个小标题比较了相同动画在CSS、requestAnimationFrame（framer-motion）和WAAPI（motion-one）中的表现。
• 这篇文章非常有帮助，因为作者列出了哪些动画类型可以进行硬件加速。

- Joshua Wootonn