46

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

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

4

10 回答 10

49

根据这个链接，jQuery 动画比 css 动画慢得多。

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

于 2012-06-11T17:35:37.613 回答
6

CSS 动画几乎总是更快。

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

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

相关问题： CSS 过渡与 JS 动画包的性能

于 2012-06-11T17:32:05.303 回答
4

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

于 2012-06-11T17:32:14.480 回答
4

这篇文章 (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。

于 2014-03-10T17:27:21.463 回答
4

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

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

于 2012-10-17T09:57:29.803 回答
2

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

于 2012-06-12T00:19:28.847 回答
1

Mozilla 开发者文档提出了一些关于 CSS3 动画的有趣观点：

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

WebKit（支持 Safari）也利用了硬件加速合成，这对性能的影响比 Javascript 目前所能做的任何事情都要大得多。（我认为这将很快改变，尽管随着更多功能被添加来管理计算）这是因为它会利用专用硬件来执行计算，而不是通过像 Javascript 这样的翻译语言来实现。

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

于 2012-06-11T17:35:23.477 回答
1

从这里

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

这里有一个测试和这个结论。

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

还要注意这一点，

CSS3 动画非常棒，但确实会消耗大量处理器的能力。无法像使用 jQuery 之类的框架一样使用 CSS3 微调动画。所以，只要 CSS3 动画对 CPU 不友好，你最好坚持使用 jQuery。

于 2012-06-11T17:39:48.400 回答
0

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

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

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

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

于 2014-05-06T19:48:22.733 回答
0

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

于 2012-08-22T19:55:55.953 回答