jQuery vs queryselectorAll (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.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

Revisions

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