document.getElementById()

JavaScript performance comparison

Test case created by olivvv and last updated

Preparation code

<p id="foo">This is an element with <code>id="foo"</code>.</p>
<script>
  function gEBI(id) {
   return document.getElementById(id);
  };
 
  var $nodes = {}; // will be used by $memo()
 
  function $memo(id) {
   return $nodes[id] ? $nodes[id] : $nodes[id] = gEBI(id);
  };
</script>

Preparation code output

This is an element with id="foo".

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
document.getElementById()
var node = document.getElementById('foo');
pending…
gEBI()
var node = gEBI('foo');
pending…
Memoized $memo()
var node = $memo('foo');
pending…
document.querySelector()
var node = document.querySelector('#foo');
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. Here’s a list of current revisions for this page:

2 comments

oliver_h commented :

I have added another test: ID direct access (foo = "foo") Because this way is not W3C compliant, I did not added this test in the current tast case, but instead, I have created another test case : http://jsperf.com/document-getelementbyid-alternatives

This test case tests something different: different way to access an object in order to set its innerHTML attribute.

Gabriel Rubens commented :

Ohhh yeah, very nice ^^

Add a comment