querySelectorAll vs getElementsByTagName vs getElementsByClassName vs jQuery (v45)

Revision 45 of this benchmark created on

Description

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

On the jQuery part, it is tested in two ways: .root-ul is a class that defines a single node. So it might be interesting to check if this allows some speed boost.

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
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('.root-ul .link')
var nodes = jQuery('.root-ul .link');
ready
jQuery('.root-ul').find('.link')
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.