querySelectorAll vs getElementsByTagName vs getElementsByClassName vs jQuery (v47)

Revision 47 of this benchmark created on

Description

Checking how querySelectorAll('parent child') or '.parent .child' selection performs against combinations of getElementsByTagName, getElementsByClassName, jQuery

Preparation HTML

<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>

Teardown


    window.console && console.log && nodes.length != 6 && console.log('nodes:',nodes.length, nodes);

Test runner

Ready to run.

Testing in
TestOps/sec
querySelectorAll
var root = document.querySelectorAll('ul .link'),
    nodes = [], l, i;
for (i = 0, l = root.length; i < l; i++) {
  nodes.push(root[i]);
}
ready
querySelectorAll + push.apply + length set
var root = document.querySelectorAll('ul .link'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = nodes.length = root.length; i < l; i++) {
  push.apply(nodes, root[i]);
}
ready
jQuery('.root-ul .link')
var nodes = jQuery('.root-ul .link');
ready
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'));
}
ready
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'));
}
ready
getElementsByClassName + iteration
var root = document.getElementsByClassName('link'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = nodes.length = root.length; i < l; i++) {
  push.apply(nodes, root[i]);
}
ready
getElementsByClassName + iteration + length set
var root = document.getElementsByClassName('link'),
    nodes = [], l, i, push = Array.prototype.push;
for (i = 0, l = nodes.length = root.length; i < l; i++) {
  push.apply(nodes, root[i]);
}
ready
jQuery with traversal
var nodes = jQuery('.root-ul').find('.link');
ready

Revisions

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