objects vs innerHTML

JavaScript performance comparison

Revision 2 of this test case created by Brandon Boone

Preparation code

<div id='stage'></div>
      
<script>
Benchmark.prototype.setup = function() {
  var div = document.createElement('div'),
    divId = document.createAttribute('id');
  
  divId.value = 'result';
  div.setAttributeNode(divId);
  
  document.getElementById('stage').appendChild(div);

};

Benchmark.prototype.teardown = function() {
  document.getElementById('stage').removeChild(div);

};
</script>

Preparation code output

<div id='stage'></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
Object Creation
var span = document.createElement('span'),
  attr = document.createAttribute("class"),
  text = document.createTextNode('test');

attr.value = "test";
span.setAttributeNode(attr);
span.appendChild(text);

document.getElementById('result').appendChild(span);
pending…
String Creation
document.getElementById('result').innerHTML = '<span class="test">test</span>';
pending…
String Creation X 20
var sb = ['<table>']; 
for(var i = 0; i < 20; i++){
 sb.push('<tr><td>test</td><td>test</td><td>test</td></tr>'); 
}
sb.push('</table>'); 

document.getElementById('result').innerHTML = sb.join('');
pending…
Object Creation X 20
var table = document.createElement('table'),
  tr = null,
  td = null,
  text = null;


for(var i = 0; i < 20; i++){
 tr = document.createElement('tr'),
 
 td = document.createElement('td'),
 td.appendChild(document.createTextNode('test'));
 tr.appendChild(td); 

 td = document.createElement('td'),
 td.appendChild(document.createTextNode('test'));
 tr.appendChild(td); 

 td = document.createElement('td'),
 td.appendChild(document.createTextNode('test'));
 tr.appendChild(td); 
 table.appendChild(tr); 
}

document.getElementById('result').appendChild(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