JQuery vs QuerySelectorAll (v5)

Revision 5 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 class="b">
      <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.querySelectorAll(".a");
 
ready
sizzle - id
var result2 = $("#pietjepuk");
 
ready
querySelectorAll - id
var result = document.querySelectorAll("#pietjepuk");
ready
sizzle - element
var result = $("div>div.b>#pietjepuk>span");
 
ready
querySelectorAll - element
var result = document.querySelectorAll("div>div.b>#pietjepuk>span");
ready
sizzle - context
var result = $("#pietjepuk", $("div"));
ready
querySelectorAll - context
var result = document.querySelector("div").querySelectorAll("pietjepuk");
ready

Revisions

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