select vs natives vs jQuery (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="container">
</div>
<script>
  var container = document.getElementById("container");
  var selecthash = {
    "#": "getElementById",
    ".": "getElementsByClassName"
  };

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

  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>

Setup

container.innerHTML = '<div></div><div id="foo"></div><div class="bar"></div>';

Teardown


    container.innerHTML = "";

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
select4-gsnedders
select4("div");
select4("#foo");
select4(".bar");
ready

Revisions

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