jQuery 1.4.2 vs queryselectorAll (v7)

Revision 7 of this benchmark created by Addy Osmani on

Description

Testing against jQuery 1.4.2 as we've ramped up qSA support in releases since then.

Preparation HTML

<script src="//code.jquery.com/jquery-1.4.2.js"></script>
<div id="header-holder">
<div id="header">
<div id="inline-holder">
<span class="inline">
<a href="#" class="link">link</a>
</span>
</div>
</div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
with jQ
$('#header-holder #header #inline-holder .inline .link')
ready
with jQ first and last elem
$('#header-holder .link')
ready
with queryselectorAll
document.querySelectorAll('#header-holder')[0].querySelectorAll('#header')[0].querySelectorAll('#inline-holder')[0].querySelectorAll('.inline')[0].querySelectorAll('.link')
ready
with querySelectorAll first and last elem
document.querySelectorAll('#header-holder')[0].querySelectorAll('.link')
ready
with querySelector
document.querySelector('#header-holder').querySelector('#header').querySelector('#inline-holder').querySelector('.inline').querySelector('.link')
ready
with querySelector first and last elem
document.querySelector('#header-holder').querySelector('.link')
ready
with querySelector
document.querySelector('#header-holder #header #inline-holder .inline .link')
ready
with querySelector
document.querySelector('#header-holder .link')
ready
with jQ find
$('#header-holder').find('.link')
ready
with querySelectorAll
document.querySelectorAll('#header-holder #header #inline-holder .inline .link')
ready
with querySelectorAll
document.querySelectorAll('#header-holder .link')
ready
wrapped querySelectorAll
(function(sel) {
 document.querySelectorAll(sel);
})('#header-holder #header #inline-holder .inline .link');
ready
wrapped querySelectorAll
(function(sel) {
 document.querySelectorAll(sel);
})('#header-holder .link');
ready
with getElementById first an
document.getElementById('header-holder').querySelector('.link')
ready
getElementById first with jQ find
$(document.getElementById('header-holder')).find('.link')
ready
getElementsByClassName
document.getElementById('header-holder').getElementsByClassName('link')
ready

Revisions

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