select vs natives vs jQuery (v7)

Revision 7 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div></div>
<div id="foo"></div>
<div class="bar"></div>
<script>
var selecthash = {
    "#": "getElementById",
    ".": "getElementsByClassName"
};
function select2(selector, context) {
    var c = selector.charAt(0),
        method = selecthash[c];

    if (method) {
        selector = selector.substr(1);
    } else {
        method = "getElementsByTagName"
    }

    return (context || document)[method](selector);
}

function select(selector, context) {
    var c = selector.charAt(0),
        method;
    
    if (c === "#") {
        method = "getElementById";
        selector = selector.substr(1);
    } else if (c === ".") {
        method = "getElementsByClassName";
        selector = selector.substr(1);
    } else {
        method = "getElementsByTagName";
    }
    
    return (context || document)[method](selector);
}

var By = {
  id: function _byId(id) {
    return document.getElementById(id);
  },
  tag: function _byTag(tag, context) {
    return (context || document).getElementsByTagName(tag);
  },
  "class": function _byClass(klass, context) {
    return (context || document).getElementsByClassName(klass);
  }
};

var By2 = (function () {
    return { 
        id: byId, 
        tag: byTag, 
        "class": byClass, 
        name: byName, 
        qsa: byQuery,
        qs: byQueryOne 
    }

    function byId(id) {
        return document.getElementById(id)
    }

    function byTag(tag, context) {
        return (context || document).getElementsByTagName(tag)
    }

    function byClass(klass, context) {
        return (context || document).getElementsByClassName(klass)
    }

    function byName(name) {
        return document.getElementsByName(name)
    }

    function byQuery(query, context) {
        return (context || document).querySelectorAll(query)
    }

    function byQueryOne(query, context) {
        return (context || document).querySelector(query)
    }
}())

function select3(selector, context) {
    var c = selector.charAt(0),
        context = context || document;

    if (c === '#') {
        return context.getElementById(selector.substr(1));
    } else if (c === '.') {
        return context.getElementsByClassName(selector.substr(1));
    } else {
        return context.getElementsByTagName(selector);
    }
}

var byId = By.id;
var byClass = By.class;
var byTag = By.tag;
var byId2 = document.getElementById.bind(document);

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
native
document.getElementsByTagName("div");
document.getElementById("foo");
document.getElementsByClassName("bar");
ready
select
select("div");
select("#foo");
select(".bar");
ready
QSA
document.querySelectorAll("div");
document.querySelectorAll("#foo");
document.querySelectorAll(".bar");
ready
By
By.id("foo");
By.class("bar");
By.tag("div");
ready
jQuery
$("div");
$("#foo");
$(".bar");
ready
select2
select2("div");
select2("#foo");
select2(".bar");
ready
select3
select3("div");
select3("#foo");
select3(".bar");
ready
local
byId("foo");
byClass("bar");
byTag("div");
ready
local2
byId2("foo");
byClass("bar");
byTag("div");
ready
By2
By2.id("foo");
By2.class("bar");
By2.tag("div");
ready

Revisions

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