jQuery vs querySelectorAll

Benchmark created by Jimmy Bazooka on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="d1">
 <div class="d2">
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
 </div>
 <div class="d2">
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
 </div>
 <div class="d2">
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
 </div>
 <div class="d2">
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
  <div class="d3"></div>
 </div>
</div>
<script>
  var els;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery single string
els = $('#d1.d3');
ready
jQuery children
els = $('#d1').children('.d3');
ready
jQuery getElemById
var d1 = document.getElementById('d1');
els = $(d1).children('.d3');
ready
querySelectorAll
var d1 = document.getElementById('d1');
els = d1.querySelectorAll('.d3');
ready

Revisions

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

  • Revision 1: published by Jimmy Bazooka on