JQuery 1.3+ Selector Performance

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

Answer 2

I am not sure about jQuery, but css selection works faster if you don't specify the tag name of the specified class, because css first looks at the class name and then checks to see if the element is the specified tag. Assuming that jQuery uses native query selector of the browser or class selector (if it exists) the first selector will be slower.