JQuery vs QuerySelectorAll (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
   <span>hallo</span>
   <div>
      <div id="pietjepuk"><span></span></div>
      <div class="a">123</div>
      <div class="a">456</div>
   </div>
</div>
<script>
  var result = $(".a");
  var xresult = document.querySelectorAll(".a");
  console.log("compare", result, xresult);
  
  var result2 = $("#pietjepuk");
  var xresult2 = document.querySelectorAll("#pietjepuk");
  console.log("compare", result2, xresult2);
  
  result = $("div>div>div");
  xresult = document.querySelectorAll("div>div>div");
  console.log("compare", result, xresult);
  
  
  result = $(">span", result2);
  xresult = result2.querySelectorAll(">span");
  console.log("compare", result, xresult);
  
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery - class
var result = $(".a");
 
ready
querySelectorAll - class
var result = document.querySelector(".a");
 
ready
sizzle - id
var result2 = $("#pietjepuk");
 
ready
querySelectorAll - id
var result = document.querySelector("#pietjepuk");
ready
sizzle - element
var result = $("div>div>div");
 
ready
querySelectorAll - element
var result = document.querySelector("div>div>div");
ready
getElementsByClassName - class
var result = document.getElementsByClassName("a");
ready

Revisions

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