select vs natives vs jQuery (v6)

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

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

function select4(selector, context) {
    switch(selector.charAt(0)) {
        case  '#':
            return (context || document).getElementById(selector.substr(1));
        case '.':
            return (context || document).getElementsByClassName(selector.substr(1));
        default:
            return (context || document).getElementsByTagName(selector);
    }
}

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

    switch(c) {
        case  '#':
            return context.getElementById(selector.substr(1));
        case '.':
            return context.getElementsByClassName(selector.substr(1));
        default:
            return context.getElementsByTagName(selector);
    }
}

function select4c(selector, context) {
    context = context || document;

    switch(selector.charAt(0)) {
        case  '#':
            return context.getElementById(selector.substr(1));
        case '.':
            return context.getElementsByClassName(selector.substr(1));
        default:
            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
Select 4
select4("div");
select4("#foo");
select4(".bar");
ready
Select4b
select4b("div");
select4b("#foo");
select4b(".bar");
ready
Select4c
select4c("div");
select4c("#foo");
select4c(".bar");
ready

Revisions

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