CODEWITHSUNDEEP
jquerycsscss-transitionscss-animations
Jules
Jules

Reputation: 14520

Which is faster for large layouts? CSS3, or jQuery?

I've got a fluid layout on my site, with one element animated and having a transition on hover. The main problem is that on wider screens (say, wider than around 1600px), the CSS3 hover transition gets visibly choppy, and starts devouring memory. Would using jQuery to accomplish this make the effect faster on larger displays?

Upvotes: 2

Views: 222

Answers (2)

Cesar Canassa
Cesar Canassa

Reputation: 20173

CSS3 is much faster. It uses native browser animations instead of javascript timer. CSS3 animations can also be GPU accelerated.

But its no silver bullet, if your page is slow you need to optimize it. The timeline tab in Chrome Dev Tools provides good hints of what is causing the slowness. You might also enable the "Composited render layer borders" under chrome://flags. That option shows which element is being GPU accelerated

Its possible that your hover transition is triggering GPU acceleration in the whole website therefore causing the slowness. If thats the case, some well placed z-index might avoid the problem.

Upvotes: 3

tomaroo
tomaroo

Reputation: 2534

EDIT: Check out this animation speed test that gives you a live comparison of the GreenSock Animation Platform's performance against a handful of other libraries capable of animation (including jQuery). The TweenLite (GreenSock) performance is actually quite impressive, especially compared to Zepto's CSS3-based animations.

--

In terms of performance, CSS3 animations are much faster than jQuery animations. (Source)

The huge difference in performance is because the browser's 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, in terms of what event will occur next.

However, as expressed in the article, jQuery is much better at browser compatibility, as CSS3 transitions are not supported by IE<=9

Upvotes: 7

Related Questions