Jquery vs Sizzle vs Vanilla (v7)

Revision 7 of this benchmark created on

Preparation HTML

<div id="test"></div>

<div class="testClass"></div>

<span></span>

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

<script src="http://raw.github.com/jquery/sizzle/master/dist/sizzle.min.js"></script>

Setup

ss = function(selector) {
      if (selector.indexOf(' ') > -1)
        return document.querySelectorAll(selector);
      if (selector.charAt(0) == '#')
        return [document.getElementById(selector.substring(1))];
      if (selector.charAt(0) == '.')
        return Array.prototype.slice.call(document.getElementsByClassName(selector.substring(1)), 0);
      return Array.prototype.slice.call(document.getElementsByTagName(selector), 0);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
JQuery
var el = $("#test");
var el2 = $(".testClass");
var el3 = $("span");
 
ready
Sizzle
var sel = Sizzle("#test");
var sel2 = Sizzle(".testClass");
var sel3 = Sizzle("span");
ready
Vanilla getElementsBy*
var vel = document.getElementById("test");
var vel2 = document.getElementsByClassName("testClass");
var vel3 = document.getElementsByTagName("span");
ready
Vanilla querySelector
var qs = document.querySelector("#test");
var qs2 = document.querySelectorAll(".testClass");
var qs3 = document.querySelectorAll("span");
ready
pseudo selector
var qs = ss("#test");
var qs2 = ss(".testClass");
var qs3 = ss("span");
ready

Revisions

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