getElementsByTagName vs dom bypassing

JavaScript performance comparison

Test case created

Preparation code

<div id="container">
  <div>aaaa</div>
  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div id="blahblah">aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div id="blahblah">aaaa</div>  <cfg id="doStuff1"/><div id="cfg_doStuff1">aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div id="blahblah">aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div id="blahblah">aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <cfg id="doStuff1"/><div id="cfg_doStuff1">aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div id="blahblah">aaaa</div>  <div>aaaa</div>  <cfg id="doStuff1"/><div id="cfg_doStuff1">aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>  <div>aaaa</div>
</div>
<script>
  Benchmark.prototype.setup = function() {
    var container = document.getElementById('container');
  };
</script>
 

Preparation code output

aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
bypassing
var children = container.children;
var c = children.length;
for (idx=0; idx<c; idx++) {
  var child = children[idx];
  var id = child.id;
  var pos = id.indexOf("cfg");
  var action;
  if(pos >= 0){
    action = is.substring(4);
  }
}
pending…
getElementsByTagName
var children = container.getElementsByTagName('cfg');
var c = children.length;
for (idx=0; idx<c; idx++) {
  var child = children[idx];
  var action = child.id;
}
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:

0 comments

Add a comment