JQuery vs QuerySelectorAll (v7)

Revision 7 of this benchmark created on

Preparation HTML

<script src="https://raw.github.com/jquery/sizzle/master/sizzle.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 = Sizzle(".a");
  var xresult = document.querySelectorAll(".a");
  console.log("compare", result, xresult);
  
  var result2 = Sizzle("#pietjepuk");
  var xresult2 = document.querySelectorAll("#pietjepuk");
  console.log("compare", result2, xresult2);
  
  result = Sizzle("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 = Sizzle(".a");
 
ready
querySelectorAll - class
var result = document.querySelectorAll(".a");
 
ready
sizzle - id
var result2 = Sizzle("#pietjepuk");
 
ready
querySelectorAll - id
var result = document.querySelectorAll("#pietjepuk");
ready
sizzle - element
var result = Sizzle("div>div.b>#pietjepuk>span");
 
ready
querySelectorAll - element
var result = document.querySelectorAll("div>div.b>#pietjepuk>span");
ready
querySelectorAll - context

var result = document.querySelector("div").querySelectorAll("#pietjepuk");
ready
sizzle - context
var result = Sizzle("#pietjepuk", Sizzle("div"));
ready

Revisions

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