Performance of jquery selectors vs css3 selectors

Question

I am fairly new to css3 using selectors (or simple css selectors in general) and am curious about the performance comparison of these css selectors vs jquery or javascript selectors?

Say you have something like this:

css version

#someID > div:nth-child(2n) { some css .... }

jquery version (edit)

$("#someID").children(":nth-child(even)").css({ some css ....});

Is it often faster to use the css selectors whenever you can, or use jquery selectors to adjust the css involved with an element or set of elements? Mainly when the set gets rather large. I would assume there wouldn't be much performance difference with only a handful of items?

Thanks!

These selector examples don't match. The second example selects a element with ID someID which is an even child, whereas the first one selects a div, which is an even child of #someID. — Rob W
– Rob W, Commented Jan 11, 2012 at 22:21
Yeah I guess I did screw up the jquery version... Tried to put it together to fast. — Matt
– Matt, Commented Jan 11, 2012 at 22:37
Your edit totally changed the question... $("#someID").children(":nth-child(even)") performs two selections. — BoltClock
– BoltClock, Commented Jan 12, 2012 at 14:37
@Matt: What I meant to say was that jQuery is using two separate selectors, one to filter down the results of selecting children of the other. This is in contrast with your CSS selector which just evaluates from right to left with the > combinator linking the two parts. — BoltClock
– BoltClock, Commented Jan 12, 2012 at 15:58

BoltClock · Accepted Answer · 2012-01-31 00:13:55Z

7

jQuery's selector engine shares most of the same syntax as CSS, effectively extending the selector standard. This means you can pass most valid CSS selectors (with some exceptions) to jQuery and it'll handle them just fine.

jQuery optimizes valid CSS selectors for modern browsers that support the selectors API by passing them directly to document.querySelectorAll(). This means your jQuery selector will have almost equal performance with the equivalent CSS selector, with the only overhead being the $().css() and the selectors API calls.

For browsers that don't support the selectors API, well, it's pretty obvious that jQuery will be really slow as it has to do all the heavy lifting on its own. More importantly, it will simply fail on the exceptions that I link to above as well as any other CSS selectors a browser doesn't support.

However, with all that said, jQuery will invariably be slower, as the browser has to run through a script and evaluate it before getting a chance to apply and compute your styles.

And after all this, honestly, it's not much even if you had hundreds of items — chances are the browser is going to take longer to fetch the markup than to render the styles. If you need to do styling, and CSS supports it, why not use CSS? That's why the language was created in the first place.

edited Jan 31, 2012 at 0:13

answered Jan 12, 2012 at 6:11

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BoltClock Over a year ago

And for that matter, CSS3 selectors aren't that much more "advanced" or "complicated" than your so-called "simple" CSS2 and CSS1 selectors.

greut · Accepted Answer · 2012-01-11 22:20:29Z

3

Pure CSS will always be faster since it's done within the browser and optimized!

The downside is that some selectors might not be supported by the browser you're on. See http://caniuse.com/#feat=css-sel3

answered Jan 11, 2012 at 22:20

greut

4,4031 gold badge32 silver badges49 bronze badges

Comments

Nazrul Muhaimin · Accepted Answer · 2012-01-12 03:19:26Z

1

For me if I use jquery means that I want to put some effect on it, say like

$("#someID:nth-child(even)").css({ some css ....}).fadeIn('slow');

Apart from that you better use CSS itself, but we are barely to see the difference of it anyway, at least for a small scope system.

I've found this web that compare selector capability from different javascript framework and jquery does it quite well.

javascript framework selector test

answered Jan 12, 2012 at 3:19

Nazrul Muhaimin

3734 silver badges15 bronze badges

Collectives™ on Stack Overflow

Performance of jquery selectors vs css3 selectors

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related