Jquery vs native - selector only (v25)

Revision 25 of this benchmark created by Arlo Guthrie on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<ul class='first'>
<li class='foo'>
</li>
<li class='bar'>
</li>
</ul>
<ul class='first'>
<li class='foo'>
</li>
<li class='bar'>
</li>
</ul>

Setup

function hasClass(el, className) {
    if (el.classList)
      return el.classList.contains(className);
    else
      return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
  }

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
$('ul.first .foo');
$('ul.first .bar');
ready
querySelector
var elfoo = document.querySelector("ul.first .foo");
var elbar = document.querySelector("ul.first .bar");
ready
querySelectorAll
var elfoo = document.querySelectorAll("ul.first .foo");
var elbar = document.querySelectorAll("ul.first .bar");
ready

Revisions

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