jQuery cached selector performance

JavaScript performance comparison

Revision 5 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="parent">
  <div class="item-a">
    <div class="item-b">
      <div class="item-c">
        <div class="item-d">
          <div class="item-e">
            <div class="item-f">
              <div class="item-g">
                <div class="item-h">
                  <div class="item-i">
                    <div class="item-j">
                      <div class="item-k">
                        <div class="item-l">
                          <div class="item-m">
                            <div class="item-n">
                              <div class="item-o">
                                <div class="item-p">
                                  <div class="item-q">
                                    <div class="item-r">
                                      <div class="item-s">
                                        <div class="item-t">
                                          <div class="item-u">
                                            <div class="item-v">
                                              <div class="item-w">
                                                <div class="item-x">
                                                  <div class="item-y">
                                                    <div class="item-z">
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
Benchmark.prototype.setup = function() {
    var items = ["item-a", "item-b", "item-c", "item-d", "item-e", "item-f", "item-g", "item-h", "item-i", "item-j", "item-k", "item-l", "item-m", "item-n", "item-o", "item-p", "item-q", "item-r", "item-s", "item-t", "item-u", "item-v", "item-w", "item-x", "item-y", "item-z"];
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Uncached selector
for (var index = 0; index < items.length; index++) {
  $("#parent." + items[index]);
}
pending…
Cached selector
var $parent = $("#parent");

for (var index = 0; index < items.length; index++) {
  $parent.find(items[index]);
}
pending…
Uncached explicit selector
for (var index = 0; index < items.length; index++) {
  $("div#.parent." + items[index]);
}
pending…
Cached explicit selector
var $parent = $("div#parent");

for (var index = 0; index < items.length; index++) {
  $parent.find(items[index]);
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment