select vs natives vs jQuery

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);
  }
};

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

Revisions

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