什么更快？ CSS3 过渡还是 jQuery 动画？

Posted 2023-03-06

【中文标题】什么更快？ CSS3 过渡还是 jQuery 动画？

【英文标题】：what's faster? CSS3 transitions or jQuery animations?

【发布时间】：2012-06-14 15:12:20

【问题描述】：

我正在开发一个 iPad html5 应用程序，我已经实现了 ontouch 支持以更快地触发事件，并且我正在使用 jQuery 来更轻松地定位元素，但对于动画我使用的是 CSS3 过渡

你认为哪个更快？使用 jQuery 动画，因为我已经导入了库，或者在使用 jQuery 定位元素时使用 CSS3 过渡？

【问题讨论】：

请记住，原生总是更快。嗯，通常。 CSS3 过渡被认为是浏览器原生的。

dev.opera.com/articles/view/css3-vs-jquery-animations

【参考方案1】：

CSS 动画几乎总是更快。

CSS 过渡和 jQuery 动画的正面对比。 不是设置计时器重复运行，而是处理转换 由浏览器本机。在我相当不科学的测试中， 过渡总是更快，以更高的帧速率运行， 尤其是元素数量多的情况下。他们也有优势 颜色可以轻松动画化，而不必依赖 插件。

http://css.dzone.com/articles/css3-transitions-vs-jquery

相关问题： Performance of CSS Transitions vs. JS animation packages

【参考方案2】：

CSS3 过渡应该更快，因为它们是浏览器原生的。

【参考方案3】：

Mozilla developer documentation raises some interesting points regarding CSS3 animation:

让浏览器控制动画序列让浏览器 优化性能和效率，例如，减少 在当前未运行的选项卡中运行的动画的更新频率 可见。

WebKit (which powered Safari) also makes use of hardware accelerated compositing，它对性能的影响比目前 javascript 所能做的任何事情都要大得多。 （我认为这将很快改变，尽管随着更多功能被添加来管理计算）这是因为它会利用专用硬件来执行计算，而不是通过像 Javascript 这样的翻译语言来实现。

我不能 100% 确定 iPad 上的 WebKit 是否是硬件加速的；但是有理由认为，由于它是标准化的并且越来越受欢迎，这只会随着时间的推移而改善。

【参考方案4】：

根据this link，jQuery 动画比 css 动画慢很多。

原因可能是因为 jquery 必须使用计时器和循环来修改 DOM 元素的 props。 CSS 是浏览器引擎的一部分。这在很大程度上取决于系统的硬件。您也可以在 Chrome 或 Firefox 的分析中检查。

【讨论】：

另一个确认 jQuery 比 CSS 慢的比较——css-tricks.com/myth-busting-css-animations-vs-javascript——但它也表明 CSS 可能比其他 JavaScript 解决方案慢。所以也许 jQuery 有改进的希望。

【参考方案5】：

来自here

CSS 过渡和 jQuery 动画的正面对比。 转换不是设置一个重复运行的计时器，而是本地处理 通过浏览器。 在我相当不科学的测试中，转换总是更快，运行 更高的帧速率，尤其是在元素数量较多的情况下。他们也有 优点是颜色可以轻松动画化，而不必依赖 插件。

一个测试here 连同这个结论。

基于计时器的 Javascript 动画永远不会像原生的那样快 动画， 因为他们没有足够的浏览器来进行相同的优化。 这些动画应仅在旧版浏览器中用作后备。

另请注意this，

CSS3 动画非常棒，但确实使用了很多处理器的 力量。 没有办法使用 CSS3 微调动画，就像使用 jQuery 之类的框架。所以，只要 CSS3 动画对 CPU 不友好 更好地坚持使用 jQuery。

【讨论】：

richardet-design 的第三句话是 2011 年的轶事证据。他的结论来自一次经历。

【参考方案6】：

CSS3 会更快，因为它是浏览器的标准配置，因为 JQuery 是另一个必须加载的文件，但是我发现根据动画，JQuery 可以运行得更流畅。有时，一次又一次地尝试纯 Javascript 也很不错。

【讨论】：

我完全同意。尤其是位置变换，jquery 有时可以运行得更顺畅。

【参考方案7】：

如果您使用带有 canvas 标记的 jQuery/javascript 动画（如果我没记错的话，它仍然依赖于计时器……不过是新手），那么它为您提供了硬件加速的优势用javascript。如果您只是想在悬停时移动某些东西，那么过渡效果很好。 CSS 过渡可能会运行得更流畅一些，但这是一种折衷，您通过使用过渡放弃了对动画的大量 javascript 控制。我喜欢保持 CSS 中的样式和 JS 中的行为——这不就是它应该如何工作的吗？ CSS 过渡有点打破了这种逻辑......

【讨论】：

你仍然可以使用 js 中的逻辑和 css 中的样式，过渡只是一个能够实现更好结果的工具。确保您的元素具有 css 转换属性，然后使用 javascipt 设置 css 值，获取控件和硬件加速。

【参考方案8】：

它的 css3 更快，消耗更少的内存并且更流畅。 CSS 处理器是用 C++ 编写的，本机代码执行速度非常快，而 jQuery (JavaScript) 是一种解释性语言，浏览器无法及时预测 JavaScript。 http://dev.opera.com/articles/view/css3-vs-jquery-animations/

查看上面的链接了解关于 CSS3 与 jQuery 的实验

【讨论】：

这在历史上可能是正确的，但现代 JavaScript 引擎（例如 Google 的 V8）将 JS 编译为本机代码。确实，CSS 动画更高效，但不一定是您给出的原因。

V8 JIT 将其编译为本机代码，但这并不意味着它与提前编译的 C++ 等静态类型语言一样快。速度差异是语言动态特性的结果。

【参考方案9】：

This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) 对 CSS 转换、jQuery 动画和 GSAP（另一个 JavaScript 库）进行了出色的比较。

CSS 动画比 jQuery 快得多。然而，在我测试过的大多数设备和浏览器上，基于 JavaScript 的 GSAP 的表现甚至比 CSS 动画还要好

所以 CSS 转换比 jQuery 动画快，但不要让这让您认为 CSS 转换比 JavaScript 快。 GSAP 表明 JavaScript 的性能优于 CSS。

【参考方案10】：

Native 应该更快，但如果浏览器开发人员马虎（或懒惰），他们会编写糟糕的代码，从而导致 CSS 动画（或过渡）效果不佳。

现在，jQuery 有一个插件，它用一个“改进”的插件覆盖了“动画”功能。见Velocity。我没有涉及使用 javascript 为 DOM 设置动画的其他方法，因为它超出了这个问题的范围。

因此，按原样，jQuery 比 CSS 慢。此外，CSS 更容易编写，因为您可能已经拥有元素样式，因此添加一些规则很容易，与您需要在某处开始编写 JS 并管理它的情况相比。但是对于复杂、繁重的东西，JS 是更快，很遗憾。

一篇关于这个确切问题的非常好的文章 - http://davidwalsh.name/css-js-animation