querySelectorAll vs getElementsByTagName

JavaScript performance comparison

Revision 41 of this test case created by Jim Montgomery

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul class="root-ul"><li><a class="link word" href="#word">word</a>
</li><li><a class="link glass" href="#glass">glass</a>
</li><li><a class="link lorum" href="#lorum">lorum</a>
</li><li><a class="link ipsum" href="#ipsum">ipsum</a>
</li><li><a class="link dolor" href="#dolor">dolor</a>
</li><li><a class="link sit-amet" href="#sit-amet">sit-amet</a>
</li></ul>
      
<script>
Benchmark.prototype.teardown = function() {
  window.console && console.log && console.log('nodes:',nodes.length, nodes);

};
</script>

Preparation code output

<ul class="root-ul"><li><a class="link word" href="#word">word</a> </li><li><a class="link glass" href="#glass">glass</a> </li><li><a class="link lorum" href="#lorum">lorum</a> </li><li><a class="link ipsum" href="#ipsum">ipsum</a> </li><li><a class="link dolor" href="#dolor">dolor</a> </li><li><a class="link sit-amet" href="#sit-amet">sit-amet</a> </li></ul>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
querySelectorAll
var nodes = Array.prototype.slice.call(document.querySelectorAll('ul .link'),0);
pending…
getElementsByTagName + getElementsByTagName
var root = document.getElementsByTagName('ul'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByTagName('a'));
}
pending…
getElementsByTagName + getElementsByClassName
var root = document.getElementsByTagName('ul'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByClassName('link'));
}
pending…
getElementsByClassName + getElementsByClassName
var root = document.getElementsByClassName('root-ul'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByClassName('link'));
}
pending…
getElementsByClassName + getElementsByTagName
var root = document.getElementsByClassName('root-ul'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = root.length; i < l; i++) {
  push.apply(nodes, root[i].getElementsByTagName('a'));
}
pending…
jQuery by CSS class
var nodes = jQuery('.root-ul .link');
pending…
jQuery by Tag + class
var nodes = jQuery('ul .link');
pending…
jQuery by class + Tag
var nodes = jQuery('.root-ul a');
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.

0 Comments