I'm working on an iPad HTML5 app and I've already implemented ontouch support to trigger events faster and I'm using jQuery to target the elements easier, but for the animations I'm using CSS3 transitions
我正在开发一个iPad HTML5应用程序，我已经实现了ontouch支持来更快地触发事件，我使用jQuery来更容易地针对元素，但是对于动画我使用CSS3转换
What do you think is faster? using jQuery animations since I already have imported the library or use CSS3 transitions when targeting elements with jQuery?
你认为什么更快?使用jQuery动画，因为我已经导入了库，或者在使用jQuery的时候使用CSS3转换?
10 个解决方案
#1
47
According to this link, jQuery animation is much slower then css animation.
根据这个链接，jQuery动画比css动画慢得多。
Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling of Chrome or Firefox.
原因可能是jquery必须使用计时器和循环修改DOM元素的道具。CSS是浏览器引擎的一部分。这很大程度上取决于系统的硬件。你也可以在Chrome或Firefox的分析中检查。
#2
6
CSS animations will almost always be faster.
CSS动画几乎总是更快。
A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.
对CSS转换和jQuery动画进行从头到尾的比较。转换不是设置一个计时器来重复运行，而是由浏览器本地处理。在我相当不科学的测试中，转换总是更快，帧率更高，特别是元素数量多的情况下。他们也有一个优势，颜色可以很容易的动画，而不是必须依赖插件。
http://css.dzone.com/articles/css3-transitions-vs-jquery
http://css.dzone.com/articles/css3-transitions-vs-jquery
Related Question: Performance of CSS Transitions vs. JS animation packages
相关问题:CSS转换与JS动画包的性能
#3
4
CSS3 Transitions should be faster because they are native to the browser.
CSS3转换应该更快，因为它们是浏览器本地的。
#4
4
Its css3 its faster and consumes lesser memory and is smoother. CSS processor is written in C++ and native code executes very fast whereas jQuery (JavaScript) is an interpreted language and the browser can't predict JavaScript ahead in time. http://dev.opera.com/articles/view/css3-vs-jquery-animations/
它的css3更快，消耗更少的内存，更平滑。CSS处理器是用c++编写的，本地代码执行速度非常快，而jQuery (JavaScript)是一种解释语言，浏览器无法提前预测JavaScript。http://dev.opera.com/articles/view/css3-vs-jquery-animations/
View the above link to know about the experiments held over CSS3 vs jQuery
查看上面的链接，了解关于CSS3 vs jQuery的实验
#5
3
This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) does an excellent comparison of CSS transforms vs. jQuery animations vs. GSAP (another JavaScript library).
这篇文章(http://css- s.com/myth-busting-css- javascript/)很好地比较了CSS转换和jQuery动画与GSAP(另一个JavaScript库)的对比。
CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations
CSS动画比jQuery快得多。然而，在我测试的大多数设备和浏览器中，基于javascript的GSAP甚至比CSS动画表现得更好
So CSS transforms are faster than jQuery animations, but don't let this make you assume that CSS transforms are faster than JavaScript. GSAP shows that JavaScript can outperform CSS.
所以CSS转换比jQuery动画要快，但是不要认为CSS转换比JavaScript快。GSAP显示，JavaScript可以胜过CSS。
#6
2
CSS3 will be faster as it comes standard with the browser where as JQuery is another file that has to be loaded, however I have found that depending on the animation that JQuery can run a lot smoother. Sometimes it's also nice to experiment with pure Javascript now and again.
CSS3会更快，因为它是浏览器的标准版本，因为JQuery是另一个需要加载的文件，但是我发现，根据动画的不同，JQuery可以运行得更流畅。有时，尝试纯Javascript也很不错。
#7
1
The Mozilla developer documentation raises some interesting points regarding CSS3 animation:
Mozilla开发人员的文档提出了一些关于CSS3动画的有趣观点:
Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.
让浏览器控制动画序列可以让浏览器优化性能和效率，例如，减少在当前不可见的选项卡中运行的动画的更新频率。
WebKit (which powered Safari) also makes use of hardware accelerated compositing, which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.
WebKit(支持Safari)也使用了硬件加速合成，这对性能的影响比Javascript目前所能做的任何事情都要大得多。(我认为这将很快改变，因为增加了更多的功能来管理计算)，这是因为它将利用专用硬件来执行计算，而不是通过像Javascript这样的翻译语言来实现。
I am not 100% certain whether WebKit on the iPad is hardware accelerated; however it would stand to reason that because it is standardized and increasing in popularity, that this would only improve with time.
我不能100%确定iPad上的WebKit是否加速了硬件;然而，我们有理由认为，因为它是标准化的，而且越来越受欢迎，这只会随着时间的推移而得到改善。
#8
1
From here
从这里
A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.
对CSS转换和jQuery动画进行从头到尾的比较。转换不是设置一个计时器来重复运行，而是由浏览器本地处理。在我相当不科学的测试中，转换总是更快，帧率更高，特别是元素数量多的情况下。他们也有一个优势，颜色可以很容易的动画，而不是必须依赖插件。
A test here along with this conclusion.
这里有一个测试和这个结论。
Javascript animations based on timers can never be as quick as native animations, as they don't have access to enough of browser to make the same optimisations. These animations should be used as a fallback only in legacy browsers.
基于计时器的Javascript动画永远不会像本机动画那样快，因为它们无法访问足够的浏览器来进行同样的优化。这些动画应该只在旧的浏览器中作为后备。
Also notice this,
也注意到这一点,
CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.
CSS3动画非常棒，但是要使用处理器的很多功能。使用CSS3对动画进行微调是不可能的，就像使用jQuery这样的框架一样。因此，只要CSS3动画不支持CPU，最好使用jQuery。
#9
0
If you're using jQuery/javascript animation with the canvas tag (which if I'm not mistaken still relies upon a timer... new to playing around with it though), then it gives you the advantage of hardware acceleration with javascript. If you're just looking to move something around when you hover then transitions work great. CSS transitions may run a little smoother but it's a trade off, you're relinquishing a ton of javascript control over the animation by using transitions. I like to keep style in CSS and behavior in JS - isn't that how it's supposed to work anyway? CSS transitions kind of broke that logic...
如果您正在使用jQuery/javascript动画和canvas标记(如果我没弄错的话，仍然依赖于计时器……)不过，这是对它的新尝试)，然后它提供了使用javascript加速硬件的优势。如果你只是想在鼠标悬停的时候移动一些东西，那么过渡效果很好。CSS转换可能会运行得更流畅，但这是一种权衡，通过使用转换，您将放弃对动画的大量javascript控制。我喜欢在CSS中保持风格，在JS中保持行为——这不是它应该如何工作的吗?CSS转换打破了这个逻辑…
#10
0
Native is supposed to be faster, but if browser developers are sloppy (or lazy), they write bad code, which leads to poor results with CSS animations (or transitions).
Native被认为速度更快，但如果浏览器开发人员马虎(或懒惰)，他们就会编写糟糕的代码，这会导致CSS动画(或转换)的糟糕结果。
Nowadays, jQuery has a plugin which overides the "animation" function with an "improved" one. see Velocity. I'm not getting into other ways to animate the DOM with javascript because it's outside the scope of this question.
现在，jQuery有一个插件可以覆盖“动画”功能和“改进”功能。看到速度。我不打算用javascript来动画DOM因为它超出了这个问题的范围。
So, as-is, jQuery is slower than CSS. also, CSS is easier to write because you already have the element style probably, so adding a few rules is easy, compared to a situation where you need to start writing JS somewhere and manage it..but for complex, heavy stuff, JS is faster, sadly.
因此，jQuery比CSS慢。此外，CSS更容易编写，因为您可能已经有了元素样式，所以添加一些规则很容易，与您需要开始编写JS并管理它的情况相比。但不幸的是，对于复杂、沉重的东西，JS更快。
A very good article about this exact question - http://davidwalsh.name/css-js-animation
关于这个问题的一篇非常好的文章——http://davidwalsh.name/css-js-animation
#1
47
According to this link, jQuery animation is much slower then css animation.
根据这个链接，jQuery动画比css动画慢得多。
Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling of Chrome or Firefox.
原因可能是jquery必须使用计时器和循环修改DOM元素的道具。CSS是浏览器引擎的一部分。这很大程度上取决于系统的硬件。你也可以在Chrome或Firefox的分析中检查。
#2
6
CSS animations will almost always be faster.
CSS动画几乎总是更快。
A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.
对CSS转换和jQuery动画进行从头到尾的比较。转换不是设置一个计时器来重复运行，而是由浏览器本地处理。在我相当不科学的测试中，转换总是更快，帧率更高，特别是元素数量多的情况下。他们也有一个优势，颜色可以很容易的动画，而不是必须依赖插件。
http://css.dzone.com/articles/css3-transitions-vs-jquery
http://css.dzone.com/articles/css3-transitions-vs-jquery
Related Question: Performance of CSS Transitions vs. JS animation packages
相关问题:CSS转换与JS动画包的性能
#3
4
CSS3 Transitions should be faster because they are native to the browser.
CSS3转换应该更快，因为它们是浏览器本地的。
#4
4
Its css3 its faster and consumes lesser memory and is smoother. CSS processor is written in C++ and native code executes very fast whereas jQuery (JavaScript) is an interpreted language and the browser can't predict JavaScript ahead in time. http://dev.opera.com/articles/view/css3-vs-jquery-animations/
它的css3更快，消耗更少的内存，更平滑。CSS处理器是用c++编写的，本地代码执行速度非常快，而jQuery (JavaScript)是一种解释语言，浏览器无法提前预测JavaScript。http://dev.opera.com/articles/view/css3-vs-jquery-animations/
View the above link to know about the experiments held over CSS3 vs jQuery
查看上面的链接，了解关于CSS3 vs jQuery的实验
#5
3
This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) does an excellent comparison of CSS transforms vs. jQuery animations vs. GSAP (another JavaScript library).
这篇文章(http://css- s.com/myth-busting-css- javascript/)很好地比较了CSS转换和jQuery动画与GSAP(另一个JavaScript库)的对比。
CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations
CSS动画比jQuery快得多。然而，在我测试的大多数设备和浏览器中，基于javascript的GSAP甚至比CSS动画表现得更好
So CSS transforms are faster than jQuery animations, but don't let this make you assume that CSS transforms are faster than JavaScript. GSAP shows that JavaScript can outperform CSS.
所以CSS转换比jQuery动画要快，但是不要认为CSS转换比JavaScript快。GSAP显示，JavaScript可以胜过CSS。
#6
2
CSS3 will be faster as it comes standard with the browser where as JQuery is another file that has to be loaded, however I have found that depending on the animation that JQuery can run a lot smoother. Sometimes it's also nice to experiment with pure Javascript now and again.
CSS3会更快，因为它是浏览器的标准版本，因为JQuery是另一个需要加载的文件，但是我发现，根据动画的不同，JQuery可以运行得更流畅。有时，尝试纯Javascript也很不错。
#7
1
The Mozilla developer documentation raises some interesting points regarding CSS3 animation:
Mozilla开发人员的文档提出了一些关于CSS3动画的有趣观点:
Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.
让浏览器控制动画序列可以让浏览器优化性能和效率，例如，减少在当前不可见的选项卡中运行的动画的更新频率。
WebKit (which powered Safari) also makes use of hardware accelerated compositing, which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.
WebKit(支持Safari)也使用了硬件加速合成，这对性能的影响比Javascript目前所能做的任何事情都要大得多。(我认为这将很快改变，因为增加了更多的功能来管理计算)，这是因为它将利用专用硬件来执行计算，而不是通过像Javascript这样的翻译语言来实现。
I am not 100% certain whether WebKit on the iPad is hardware accelerated; however it would stand to reason that because it is standardized and increasing in popularity, that this would only improve with time.
我不能100%确定iPad上的WebKit是否加速了硬件;然而，我们有理由认为，因为它是标准化的，而且越来越受欢迎，这只会随着时间的推移而得到改善。
#8
1
From here
从这里
A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.
对CSS转换和jQuery动画进行从头到尾的比较。转换不是设置一个计时器来重复运行，而是由浏览器本地处理。在我相当不科学的测试中，转换总是更快，帧率更高，特别是元素数量多的情况下。他们也有一个优势，颜色可以很容易的动画，而不是必须依赖插件。
A test here along with this conclusion.
这里有一个测试和这个结论。
Javascript animations based on timers can never be as quick as native animations, as they don't have access to enough of browser to make the same optimisations. These animations should be used as a fallback only in legacy browsers.
基于计时器的Javascript动画永远不会像本机动画那样快，因为它们无法访问足够的浏览器来进行同样的优化。这些动画应该只在旧的浏览器中作为后备。
Also notice this,
也注意到这一点,
CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.
CSS3动画非常棒，但是要使用处理器的很多功能。使用CSS3对动画进行微调是不可能的，就像使用jQuery这样的框架一样。因此，只要CSS3动画不支持CPU，最好使用jQuery。
#9
0
If you're using jQuery/javascript animation with the canvas tag (which if I'm not mistaken still relies upon a timer... new to playing around with it though), then it gives you the advantage of hardware acceleration with javascript. If you're just looking to move something around when you hover then transitions work great. CSS transitions may run a little smoother but it's a trade off, you're relinquishing a ton of javascript control over the animation by using transitions. I like to keep style in CSS and behavior in JS - isn't that how it's supposed to work anyway? CSS transitions kind of broke that logic...
如果您正在使用jQuery/javascript动画和canvas标记(如果我没弄错的话，仍然依赖于计时器……)不过，这是对它的新尝试)，然后它提供了使用javascript加速硬件的优势。如果你只是想在鼠标悬停的时候移动一些东西，那么过渡效果很好。CSS转换可能会运行得更流畅，但这是一种权衡，通过使用转换，您将放弃对动画的大量javascript控制。我喜欢在CSS中保持风格，在JS中保持行为——这不是它应该如何工作的吗?CSS转换打破了这个逻辑…
#10
0
Native is supposed to be faster, but if browser developers are sloppy (or lazy), they write bad code, which leads to poor results with CSS animations (or transitions).
Native被认为速度更快，但如果浏览器开发人员马虎(或懒惰)，他们就会编写糟糕的代码，这会导致CSS动画(或转换)的糟糕结果。
Nowadays, jQuery has a plugin which overides the "animation" function with an "improved" one. see Velocity. I'm not getting into other ways to animate the DOM with javascript because it's outside the scope of this question.
现在，jQuery有一个插件可以覆盖“动画”功能和“改进”功能。看到速度。我不打算用javascript来动画DOM因为它超出了这个问题的范围。
So, as-is, jQuery is slower than CSS. also, CSS is easier to write because you already have the element style probably, so adding a few rules is easy, compared to a situation where you need to start writing JS somewhere and manage it..but for complex, heavy stuff, JS is faster, sadly.
因此，jQuery比CSS慢。此外，CSS更容易编写，因为您可能已经有了元素样式，所以添加一些规则很容易，与您需要开始编写JS并管理它的情况相比。但不幸的是，对于复杂、沉重的东西，JS更快。
A very good article about this exact question - http://davidwalsh.name/css-js-animation
关于这个问题的一篇非常好的文章——http://davidwalsh.name/css-js-animation