DOM vs innerHTML (v28)

Revision 28 of this benchmark created on

Preparation HTML

<div id='sample'>
  <h1 id='title'>Title</h1>
  <h2 id='subtitle'>by</h2>
  <div id='content'>
  </div>
</div>

Setup

var colors = ["red", "yellow", "green", "cyan", "blue", "magenta"];

Teardown


    var sample = document.getElementById('sample');
    sample.innerHTML = "<h1 id='title'>Title</h1><h2 id='subtitle'>by</h2><div id='content'></div>";

Test runner

Ready to run.

Testing in
TestOps/sec
DOM
var title = document.getElementById('title');
var subtitle = document.getElementById('subtitle');
title.removeChild(title.firstChild);

title.appendChild(document.createTextNode("Colors"));
subtitle.removeChild(subtitle.firstChild);

subtitle.appendChild(document.createTextNode("John Doe"));
ready
innerHTML
var title = document.getElementById('title');
title.innerHTML = "Colors";

var subtitle = document.getElementById('subtitle');
subtitle.innerHTML += " John Doe";
 
ready

Revisions

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