Array lookup vs getElementById

Benchmark created by Smess on

Description

Compare finding as dom node from a array of nodes VS getElementById VS various jquery methods.

The array alternative allows use of key values (say from a database) that are not guaranteed to meet the rules for css ids or may mimic other ids used on the page.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id='testgroup'>
  <div id="d0" class="d0">
    d0
  </div>
  <div id="d1" class="d1">
    d1
  </div>
  <div id="d2" class="d2">
    d2
  </div>
  <div id="d3" class="d3">
    d3
  </div>
  <div id="d4" class="d4">
    d4
  </div>
  <div id="d5" class="d5">
    d5
  </div>
  <div id="d6" class="d6">
    d6
  </div>
  <div id="d7" class="d7">
    d1
  </div>
  <div id="d8" class="d8">
    d8
  </div>
  <div id="d9" class="d9">
    d9
  </div>
  <div id="d10" class="d10">
    d10
  </div>
  <div id="d11" class="d11">
    d11
  </div>
  <div id="d12" class="d12">
    d12
  </div>
  <div id="d13" class="d13">
    d13
  </div>
  <div id="d14" class="d14">
    d14
  </div>
  <div id="d15" class="d15">
    d15
  </div>
  <div id="d16" class="d16">
    d16
  </div>
  <div id="d17" class="d17">
    d11
  </div>
  <div id="d18" class="d18">
    d18
  </div>
  <div id="d19" class="d19">
    d19
  </div>
</div>

Setup

// build hash-like table
    var arr = [];
    $('#testgroup div').each(function(index, element) {
      arr[element.id] = element
    });
    var $arr = $('#testgroup div');
    var $parent = $('#testgroup');
    var nodes = document.getElementById("testgroup");
    
    function byId(elId) {
      return document.getElementById(elId)
    }

Test runner

Ready to run.

Testing in
TestOps/sec
get node with getElementById
for (var i = 0; i < 20; i++) {
  var node = document.getElementById("d" + i);
  if (!node) throw "node d" + i +" not found";
}
ready
get node from array
for (var i = 0; i < 20; i++) {
  var node = arr["d" + i];
  if (!node) throw "node d" + i +" not found";
}
ready
get node with jquery
for (var i = 0; i < 20; i++) {
  var node = $("#d" + i)[0];
  if (!node) throw "node d" + i +" not found";
}
ready
get node with jquery2
for (var i = 0; i < 20; i++) {
  var node = $("#testgroup #d" + i)[0];
  if (!node) throw "node d" + i +" not found";
}
ready
get node with jquery .children()
for (var i = 0; i < 20; i++) {
  var node = $parent.children("#d" + i)[0];
  if (!node) throw "node d" + i +" not found";
}
ready
get node with jquery .find()
for (var i = 0; i < 20; i++) {
  var node = $parent.find("#d" + i)[0];
  if (!node) throw "node d" + i +" not found";
}
ready
get node with jquery by class
for (var i = 0; i < 20; i++) {
  var node = $(".d" + i)[0];
  if (!node) throw "node d" + i +" not found";
}
ready
get node with byId function
for (var i = 0; i < 20; i++) {
  var node = byId("d" + i);
  if (!node) throw "node d" + i +" not found";
}
ready

Revisions

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

  • Revision 1: published by Smess on