jQuery CSS3 Not vs. .Not()

JavaScript performance comparison

Test case created by Jeffrey Way

Info

The jQuery docs specify that it's better to use .not() over $('x:not(y)'). Testing to make sure that's the case in all browsers.

Preparation code

<div id="container">
      <div id="header"> Header </div>
      <div>Div</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Preparation code output

Div

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
CSS3 Selector
 
var d = $('div:not(#header)');
 pending…
Not() Method
 
var d = $('div').not('#header');
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

13 comments

Jeffrey Way (revision owner) commented : ∞

So the outcome is that it's faster to use a CSS3 selector in virtually all browsers (except IE8), by a factor of around 2-3.

Diego Perini commented : ∞

It would be nice if you could add a complete "unrolled" version in simple Javascript and one using the new Selector API to have a complete picture. Chaining is obviously eating time.

Richard commented : ∞

Woah! Opera!

Jeffrey Way (revision owner) commented : ∞

Oh wow - those Opera numbers are insane. I wonder if that's a mistake.

Jeffrey Way (revision owner) commented : ∞

Just downloaded Opera 11 alpha. I'm getting numbers in the 100,000 range...but that's still an order of magnitude better than Firefox 4 beta. Very interesting.

Blake commented : ∞

Just wanted to say I was asking myself this EXACT question today at work! I've been digging into jQuery on my current project and loving it. So thanks for answering my question!

Jeffrey Way commented : ∞

Hey guys - just to clarify: always do whatever is most readable for you. The performance differences are slight. Better to write code that you can come back to in six months.

This is just for fun.

Savageman commented : ∞

If I understood correctly, since Opera 10.70, the browser is pre-compiling large chunks of the popular JS libraries. That's why it's blazing fast. :)

Volly commented : ∞

Nice test-cases. Don't know that the css-way is that much faster. One note: please add the unit of the measured values in the table (maybe in the head). It takes me quite a long time to find the "Ops/sec".

Mathias Bynens commented : ∞

If I understood correctly, since Opera 10.70, the browser is pre-compiling large chunks of the popular JS libraries. That’s why it’s blazing fast. :)

Opera’s Anne van Kesteren has confirmed this rumor is false.

Richard commented : ∞

Aaand here we go http://twitter.com/gsnedders/status/1689110007783424! Caching query results is difficult to grasp for me. My first thought is that it completely voids this test. (How often do we need to query the same selector? We often ‘cache’ the results in our code.)

Erik Jansson commented : ∞

I just tried this in Firefox 4.0b7 and the result is, contrary to the other results, that the CSS3 selector is 29% slower. I have no idea why but it might have something to do with the new JavaScript engine (Jägermonkey) in beta 7?

Tried this a couple of days ago with beta 6 and then it was the other way around. Very interesting!

failon commented : ∞

Thanks for the information. I'm doing some research on it. I found some great information and thanks for this valuable article.

Add a comment