Jquery vs Sizzle vs Vanilla (v12)

Revision 12 of this benchmark created by Binyamin on

Preparation HTML

<div id=test></div>
<div class=testClass></div>
<span></span>
<script src=//code.jquery.com/jquery-1.10.2.min.js></script>
<script src=https://raw.github.com/jquery/sizzle/master/src/sizzle.js></script>

Setup

ss = function(selector) {
      'use strict';
      if (selector.indexOf(' ') > -1)
        return document.querySelectorAll(selector);
      var char = selector.charAt(0);
      if (char === '#')
        return [document.getElementById(selector.substring(1))];
      if (char === '.')
        return document.getElementsByClassName(selector.substring(1));
      return document.getElementsByTagName(selector);
    }

Test runner

Ready to run.

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

Revisions

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