DOM Creation

JavaScript performance comparison

Test case created by Ickata

Preparation code

var container;
      
<script>
Benchmark.prototype.setup = function() {
  container = document.body.appendChild( document.createElement('div') );

};

Benchmark.prototype.teardown = function() {
  document.body.removeChild( container );

};
</script>

Preparation code output

var container;

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
createElement
var table = container.appendChild( document.createElement('table').appendChild( document.createElement('tbody') ) );

for ( var i=0; i<20; i += 1 ) {
   var tr = table.appendChild( document.createElement('tr') );
   for ( var j=0; j<10; j += 1 ) {
      var td = tr.appendChild( document.createElement('td') );
      var div = td.appendChild( document.createElement('div') );
      div.appendChild( document.createElement('img') );
      div.appendChild( document.createElement('input') );
      div.appendChild( document.createTextNode(i + ':' + j) );
   }
}
pending…
cloneNode
var table = container.appendChild( document.createElement('table').appendChild( document.createElement('tbody') ) );

var tr = table.appendChild( document.createElement('tr') );
var td = tr.appendChild( document.createElement('td') );
var div = td.appendChild( document.createElement('div') );
div.appendChild( document.createElement('img') );
div.appendChild( document.createElement('input') );

for ( var j=1; j<10; j += 1 ) {
   tr.appendChild( td = td.cloneNode(true) );
}

for ( var i=1; i<20; i += 1 ) {
   table.appendChild( tr = tr.cloneNode(true) );   
}

for ( var i=0; i<20; i += 1 ) {
   for ( var j=0; j<10; j += 1 ) {
      table.childNodes[i].childNodes[j].firstChild.appendChild( document.createTextNode(i + ':' + j) );
   }
}
pending…
innerHTML
var html = ['<table><tbody>'];
for ( var i=0; i<20; i += 1 ) {
   html.push('<tr>');
   for ( var j=0; j<10; j += 1 ) {
      html.push('<td><div><img><input>', i, ':', j, '</div></td>');
   }
   html.push('</tr>');
}
container.innerHTML = html.join('') + '</tbody></table>';
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

var container;