Question

I’ve just created a jquery selector performance testing page.
http://guhelouis.github.com/jquery_performance/

There are 10000 divs with class name from .div-cl-1 to .div-cl-10000. And I’m trying to get the .div-cl-9999 with 2 different selector :

• $(‘div.div-cl-9999)
• $(‘.div-cl-9999’)

As you may guess that the first one will be faster than the second one. But, please see the result in http://guhelouis.github.com/jquery_performance/ (push the Run it button, sorry but it’s a little bit slow), the first result will always be the first one is slower than the second one.

and if you reverse the order in running, means :

• $(‘.div-cl-9999’)
• $(‘div.div-cl-9999)

The result is back to normal again.

Is it some kind of ‘indexing’ inside the new jquery selector engine?

PS: these weird result occurs only using jquery 1.3+ (the time JQuery started to use Sizzle).

Answer 1

Both are different selectors.

$('div.div-cl-1') // select all div elements with class "div-cl-1" 

$('.div-cl-1') // select all elements with class "div-cl-1"

For eg : The first one will not select something like

<p>
    <span class="div-cl-1">test</span>
</p>

EDIT: Just found this – http://jsperf.com/jquery-selector-speed-tests