jQuery class vs tag qualfied class selector (v41)

Revision 41 of this benchmark created 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.

Preparation HTML

<div id="content">
  <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
      <li><input type="radio" class="on otherClass" 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>
<div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div><div class="nope"></div>
    <input class="button" id="traffic_button" type="submit" value="Go" />
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
class selector
$('.on')
ready
TwoClasses
$('.on.otherClass')
ready
tag qualified class selector
$('input.on')
ready
#id descendant class selector
$('#traffic_light .on')
ready
#id descendant tag qualified class selector
$('#traffic_light input.on')
ready
find
$('#traffic_light').find('.on')
ready
findComplex
$('#traffic_light').find('.on.otherClass')
ready
findComplex2
$('#traffic_light').find('input.on.otherClass')
ready
More complex selector
$('input.on.otherClass')
ready
tag and find complex
$('input').find('.on.otherClass')
ready
Most specific selector
$('#traffic_light input.on.otherClass')
ready

Revisions

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