DOM caching excercise

JavaScript performance comparison

Revision 4 of this test case created by sk

Preparation code

<div id="test">
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
  <div>
      
<script>
Benchmark.prototype.setup = function() {
  var test = document.getElementById('test');
  
  var spans = test.childNodes;
  
  var copied = [];
  for (var i = 0, ilen = spans.length; i < ilen; i++) {
    spans[i].nodeTypeCopy = spans[i].nodeType * 1;
    copied.push(spans[i]);
  }
  
  var wrapped = [], elems = [], types = [];
  for (var i = 0, ilen = spans.length; i < ilen; i++) {
    wrapped.push({
      elem: spans[i],
      nodeType: spans[i].nodeType * 1
    });
  
    elems.push(spans[i]);
    types.push(spans[i].nodeType * 1);
  }

};
</script>

Preparation code output

<div id="test"> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Raw DOM
if (document.getElementById('test').childNodes[1].nodeType !== 1) {
  throw new Error("this is not an Element");
}
pending…
Cached DOM
if (spans[1].nodeType !== 1) {
  throw new Error("this is not an Element");
}
pending…
Copied DOM cache
if (copied[1].nodeType !== 1) {
  throw new Error("this is not an Element");
}
pending…
Copied DOM cache & property
if (copied[1].nodeTypeCopy !== 1) {
  throw new Error("this is not an Element");
}
pending…
Wrapped
if (wrapped[1].nodeType !== 1) {
  throw new Error("this is not an Element");
}
pending…
Raw DOM w/ getElementById
if (test.childNodes[1].nodeType !== 1) {
  throw new Error("this is not an Element");
}
pending…
Cached in separate Arrays
if (types[1] !== 1) {
  throw new Error("this is not an Element");
}
pending…

Compare results of other browsers

Revisions

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

0 Comments