Sizzle class vs tag qualfied class selector (v39)

Revision 39 of this benchmark created by someguy 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="thisid" class="row list">
                        <div class="col-lg-12">
                                <div class="row">
                                        <div class="col-lg-12">
                                                <div class="inner">
              <div class="further_in">
                <a href="#">anchor</a>
                <a href="#">
                  <img src="http://placehold.it/100x50" title="some image" />
                </a>
              </div>
            </div>
                                                <div class="inner">
              <div class="further_in">
                <a href="#">anchor</a>
                <a href="#">
                  <img src="http://placehold.it/100x50" title="some image" />
                </a>
              </div>
            </div>
                                                <div class="inner">
              <div class="further_in">
                <a href="#">anchor</a>
                <a href="#">
                  <img class="theimg" src="http://placehold.it/100x50" title="some image" />
                </a>
              </div>
            </div>

        
                                        </div>
                                </div>
                        </div>

                </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
descendant tag qualified class selector
$('#thisid .further_in a img')
ready
decendant class selector
$('#thisid div.further_in a img')
ready
ID qualified decendant class selector
$('#thisid .inner .further_in a img')
ready
ID decendant tag qualified class selector
$('#thisid div.inner div.further_in a img')
ready
className only
$('#thisid').find('.further_in a img')
ready
tag qualified className
$('#thisid').find('div.further_in a img')
ready
id only
$('#thisid').find('div a img')
ready
tag qualified id
$('#thisid div a img')
ready
document.getElementById
$('#thisid').find('div.inner div.further_in a img')
ready
add to var first.
var el = document.getElementById("thisid");
$(el).find('div a img');
ready
add to var first 2
var el = document.getElementById("thisid");
$(el).find('.inner a img');
ready
var el = document.getElementById("thisid");
$(el).find('.further_in a img');
ready
var el = document.getElementById("thisid");
$(el).find('div a img.theimg');
ready

Revisions

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