cached vs getElementById (v2)

Revision 2 of this benchmark created by foreach vs each on


Description

This tests presumes that an initial fetch as been performed. The question is with respect to subsequent fetches.

Is there a big difference between redundant getElementById calls and caching the result

Preparation HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<div id="one">
  <div id="two">
    <div id="three">
      <div id="four">
        this one
      </div>
    </div>
  </div>
</div>
<script>
  var get = _.memoize(_.bind(document.getElementById, document));
  var obj = {
      elems:{
          el:document.getElementById("four")
      }
  };
  var test1;
  var test2;
  var test3;
  var test4;
  var test5;
</script>

Setup

test1 = test2 = test3 = test4 = test5 = null;

Test runner

Ready to run.

Testing in
TestOps/sec
5 getElementById calls
test1 = document.getElementById("four");
test2 = document.getElementById("four");
test3 = document.getElementById("four");
test4 = document.getElementById("four");
test5 = document.getElementById("four");
ready
from cache
test1 = obj.elems.el;
test2 = obj.elems.el;
test3 = obj.elems.el;
test4 = obj.elems.el;
test5 = obj.elems.el;
ready
memoized
test1 = get("four");
test2 = get("four");
test3 = get("four");
test4 = get("four");
test5 = get("four");
ready

Revisions

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