I'd like to see a comparison between CSS3 and html5 canvas performance, as for a simple animation in this example, I think Canvas may be more applicable.
jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
11–20 of 26 posts
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#12I did this same experiment with D3 (animating the outline-color and background-color for 1s with ease-in-out), and I got performance nearly identical to CSS.
A lot of this gain is likely from using requestAnimationFrame, but there could be other optimizations in D3, such as a single timer loop for all transitions. So, I think it's misleading to say you can't do fast transitions in JavaScript. It might just be a need to optimize jQuery.
But still, I definitely prefer to use CSS transitions when possible, because the performance is generally better and I like the declarative syntax.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#13maybe i am not getting something here but isn't this obvious? native c++ will be faster than javascript (which also compiles to c++ (i believe?) but does not have hardware acceleration and is single threaded [in case of jquery atleast]). Libraries (like jquery) were made to fill in the gaps that css or js had. now that the gaps are filling up, jquery becomes a redundancy (atleast for basic animations like that of css) So what is the need for testing? or maybe i am missing something?
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#14I'd like to see a comparison between CSS3 and html5 canvas performance, as for a simple animation in this example, I think Canvas may be more applicable.
agreed, canvas will probably perform better because it is made for animations where as DOM was not made with animation in mind. Plus canvas animations are, in some cases, hardware accelerated i believe?
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#15maybe i am not getting something here but isn't this obvious? native c++ will be faster than javascript (which also compiles to c++ (i believe?) but does not have hardware acceleration and is single threaded [in case of jquery atleast]). Libraries (like jquery) were made to fill in the gaps that css or js had. now that the gaps are filling up, jquery becomes a redundancy (atleast for basic animations like that of css…
This is part of a tutorial, the idea was to give some evidence for justifying the use of transitions where possible.
It also might get more people to realise that jQuery isn't the answer to everything, and animation is definitely not one of it's strong points (right now anyway!)
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#16I did this same experiment with D3 (animating the outline-color and background-color for 1s with ease-in-out), and I got performance nearly identical to CSS. http://bl.ocks.org/d/1616423/ A lot of this gain is likely from using requestAnimationFrame, but there could be other optimizations in D3, such as a single timer loop for all transitions. So, I think it's misleading to say you can't do fast transitions in JavaSc…
That is much better than the jQuery version - particularly the use of requestAnimationFrame. It still has almost a second of Recalculate Style before the animation, but the animation at least manages to get some frames in.
I'm hoping that if nothing else this post prompts the jQuery team to have a look at their animation function.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#17In FireFox the problems are either with the timer or how fast a screen is drawn.
On an old laptop, changing the opacity, or set a different color of the same amount of divs takes about 50ms. The next timeout or interrupt, is on average 200ms later. The first screen draw is the slowest with 350ms.
I used absolute position for the divs, so that the browser doesn't have to recalculate the page after each update.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#18maybe i am not getting something here but isn't this obvious? native c++ will be faster than javascript (which also compiles to c++ (i believe?) but does not have hardware acceleration and is single threaded [in case of jquery atleast]). Libraries (like jquery) were made to fill in the gaps that css or js had. now that the gaps are filling up, jquery becomes a redundancy (atleast for basic animations like that of css…
This is part of a tutorial, the idea was to give some evidence for justifying the use of transitions where possible. It also might get more people to realise that jQuery isn't the answer to everything, and animation is definitely not one of it's strong points (right now anyway!)
Yes, i see it now, there seems to be some confusion as to the need of the article. It makes more sense in a tutorial perspective and is needed to pull people off of jquery. Thanks for clarification. :)
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#19Why is everyone missing this? JQuery is a library that provides a consistent API across browsers. In a future release couldn't they detect CSS3 animation support and update the animate function to use them if supported?
Some projects are already doing this:
http://www.benbarnett.net/2010/09/01/enhancing-jquerys-anima...
Sounds like it should go into mainline jquery pretty soon.
Re: jQuery or CSS3 transitions? Speed comparison + brief empirical explanation.
#20I'd like to see a comparison between CSS3 and html5 canvas performance, as for a simple animation in this example, I think Canvas may be more applicable.
The difficulty with canvas is that it can't really be dropped in to a site in the same way. A site that makes use of slides and fades using a JS library could patch the library to use transitions instead with only a few lines of code (well a few hundred perhaps). Using canvas requires dropping the accessibility benefits as well as having to replicate all the elements manually on canvas.
I agree though, this contrived example would surely work better with canvas.