JQuery selectors, efficiency

Question

Recently, I read about the effectiveness of various selector engines. I know that jQuery uses the Sizzle engine and this blog post about some jQuery materials that mentioned that the Sizzle engine breaks your selector into an array, then parses it from left to right.

Then, from right to left, it begins to decrypt each element using regular expressions. It also means that the right side of your selector should be as specific as possible - for example, the name of an identifier or tag.

My question is: is it more efficient to start the selector with just the given id or tag name:

var div = $('#someId'); //OR var div = $('div#someId'); 

Since I write my CSS in the form of div#someId , I usually do my selectors the same way, can I get Sizzle to do the extra work (if QuerySelectorAll is not available)?

Answer 1

jQuery and Sizzle optimize the #id ^[source] selector to document.getElementById(id) . I think they cannot optimize it with tag#id .

The first is faster.

BTW, specifying the tag name for the #id selector, overrides, since there can only be one tag with this identifier in the document. Redefinition is slower even in CSS .

Answer 2

Instead of speculating, let him measure it!

Here's a test case with this page loaded, and then matching a random item with both methods.

Make sure you scroll down the page.

http://jsperf.com/which-jquery-sizzle-selector-is-faster#runner

As you would expect, a simple identifier works faster than the corresponding tag (short for getElementByID). The same thing happens when using classes.

Selection by identifier is much faster than selection by class, mainly because identifiers are guaranteed to be unique.

Answer 3

If you are using jQuery, you can guess the browser with getElementById . $('#someId') can be converted to document.getElementById('someId') . $('div#someId') will not be, so it will be faster to lose the tag name.

jsPerf demonstrating this . The difference is huge.

Answer 4

 var div = $('#someId'); //should be faster 

jQuery will use getElementById() for the specified selector

 var div = $('div#someId'); //would probably preform slower due to finding all the divs first 

jQuery will use getElementsByTagName() and then iterate if the array of elements for the specified selector

Also remember that label names should be determined using class selectors (if possible)

 var div = $('div.myclass') //faster than the statement below 

against

 var div = $('.myclass') //slower 

Answer 5

JsPerf: http://jsperf.com/jquery-id-vs-tagname-id

The first will be faster, because it should only check the identifier. The second performs the same check and must make sure that the tag is correct. div#id will not give you an element with id id if it is not a div

Answer 6

Here you can see the source code: http://code.jquery.com/jquery-1.6.2.js in the init function.

The fastest $('') selector, which immediately returns an empty jQuery object.

$('body') next one that jQuery converts to document.body

The next $('#id') that uses document.getElementById('id') .

Any other selector, such as $('div#id') , will simply become a call to $(document).find('div#id') . find() very complicated compared to any of these solutions and uses Sizzle JS to select a div.