W3C DOM vs. innerHTML (v10)

Revision 10 of this benchmark created by galambalazs on

Description

Reincarnation of: http://www.quirksmode.org/dom/innerhtml.html

With a major update from: http://blog.stevenlevithan.com/archives/faster-than-innerhtml

Preparation HTML

<div id="writeroot" style="width:1px; height:1px; overflow:hidden;"></div>
<script>
  function removeTable() {
   document.getElementById('writeroot').innerHTML = '';
  }
  
  function fastInnerHTML(el, html) {
   var clone = el.cloneNode(false);
   clone.innerHTML = html;
   el.parentNode.replaceChild(clone, el);
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
W3CDOM 1: Create all elements as needed
removeTable();
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i = 0; i < 20; i++) {
 var z = y.appendChild(document.createElement('tr'));
 for (var j = 0; j < 20; j++) {
  var a = z.appendChild(document.createElement('td'));
  a.appendChild(document.createTextNode('*'));
 }
}
document.getElementById('writeroot').appendChild(x);
ready
W3CDOM 2: Create elements once, then clone
removeTable();
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
var tr = document.createElement('tr');
var td = document.createElement('td');
var ast = document.createTextNode('*');
for (var i = 0; i < 20; i++) {
 var z = y.appendChild(tr.cloneNode(true));
 for (var j = 0; j < 20; j++) {
  var a = z.appendChild(td.cloneNode(true));
  a.appendChild(ast.cloneNode(true));
 }
}
document.getElementById('writeroot').appendChild(x);
ready
tableMethods
removeTable();
var x = document.createElement('table');
var y = x.appendChild(document.createElement('tbody'));
for (var i = 0; i < 20; i++) {
 var z = y.insertRow(0);
 for (var j = 0; j < 20; j++) {
  var a = z.insertCell(0).appendChild(document.createTextNode('*'));
 }
}
document.getElementById('writeroot').appendChild(x);
ready
INNERHTML 1: concatenate one string
removeTable();
var string = '<table><tbody>';
for (var i = 0; i < 20; i++) {
 string += '<tr>';
 for (var j = 0; j < 20; j++) {
  string += '<td>*</td>';
 }
 string += '</tr>';
}
string += '</tbody></table>';
document.getElementById('writeroot').innerHTML = string;
ready
INNERHTML 2: push and join
removeTable();
var string = new Array();
string.push('<table><tbody>');
for (var i = 0; i < 20; i++) {
 string.push('<tr>');
 for (var j = 0; j < 20; j++) {
  string.push('<td>*</td>');
 }
 string.push('</tr>');
}
string.push('</tbody></table>');
var writestring = string.join('');
document.getElementById('writeroot').innerHTML = writestring;
ready
INNERHTML alternative
removeTable();
var string = '<table><tbody>';
for (var i = 0; i < 20; i++) {
 string += '<tr>';
 for (var j = 0; j < 20; j++) {
  string += '<td>*</td>';
 }
 string += '</tr>';
}
string += '</tbody></table>';
fastInnerHTML(document.getElementById('writeroot'), string);
ready

Revisions

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

  • Revision 1: published by galambalazs on
  • Revision 5: published by Vladimir Sitnikov on
  • Revision 6: published by Vladimir Sitnikov on
  • Revision 10: published by galambalazs on
  • Revision 14: published on