Sizzle class vs tag qualfied class selector (v38)

Revision 38 of this benchmark created by Peter Caisse on

Description

Just came across this article http://www.artzstudio.com/2009/04/jquery-performance-rules/ that recommends both tag qualifying class selectors as well as descending from an id for maximum jquery performance. Thought I'd test it out on his examples, because I've learned that you never want to tag qualify ids OR classes if you don't have to (similarly to CSS). However, considering the age of the article, the way jquery works could well be different now.

EDIT: Altered to use Sizzle only.

EDIT: Added "className only", "tag qualified className", "id only", and "tag qualified id"

The difference lies between Sizzle's use of querySelectorAll, getElementsByClassName, and getElementById under the hood.

Sizzle attempts to optimize and use getElementsByClassName and getElementById instead of querySelectorAll if it can. It can when the selector looks like one of the following without decedents or tag names: '.button', '#traffic_button'.

The difference is when using a single class or id lookup, getElementsByClassName and getElementById can be used which are way faster than querySelector. You'll see it's 10 times faster in modern browsers.

IE8 is where getElementsByClassName wasn't implemented and therefore Sizzle uses querySelectorAll for IE8, and for that browser it's negligibly slower without the tag (but IE 8 isn't our most common use case).

So the root answer is when using querySelectorAll, it's faster to use the tag. If using only a single className or a single ID it's faster to use getElementsByClassName (after IE8) and getElementById. As mentioned earlier, Sizzle will use getElementsByClassName and getElementById if the selector doesn't contain any qualifiers other than just a single className or id.

Preparation HTML

<div id="content" class='container'>
  <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
      <li><input type="radio" class="on" name="light" value="red" /> Red</li>
      <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
      <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
  </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sizzle/2.0.0/sizzle.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
decendant tag qualified class selector
Sizzle('div.container input.button')
ready
decendant class selector
Sizzle('.container .button')
ready
ID qualified decendant class selector
Sizzle('#content .button')
ready
ID decendant tag qualified class selector
Sizzle('#content input.button')
ready
className only
Sizzle('.button')
ready
tag qualified className
Sizzle('input.button')
ready
id only
Sizzle('#traffic_button')
ready
tag qualified id
Sizzle('input#traffic_button')
ready
document.getElementById
document.getElementById('traffic_button')
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.