W3C DOM vs. innerHTML

JavaScript performance comparison

Test case created by check_ca

Preparation code

<div id="writeroot" style="display:none"></div>
<script>
  function removeTable()
  {
      document.getElementById('writeroot').innerHTML = '';
  }
  
  var content = "ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ"
  
  /* W3CDOM 1: Create all elements as needed */
  
  function w3cdom1()
  {
      removeTable();
      var x = document.createElement('div');
      var y = x.appendChild(document.createElement('div'));
      for (var i=0;i<50;i++)
      {
          var z = y.appendChild(document.createElement('div'));
          for (var j=0;j<50;j++)
          {
              var a = z.appendChild(document.createElement('div'));
              a.appendChild(document.createTextNode(content));
          }
      }
      document.getElementById('writeroot').appendChild(x);
  }
  
  /* W3CDOM 2: Create elements once, then clone */
  
  function w3cdom2()
  {
      removeTable();
      var x = document.createElement('div');
      var y = x.appendChild(document.createElement('div'));
      var tr = document.createElement('div');
      var td = document.createElement('div');
      var ast = document.createTextNode(content);
      for (var i=0;i<50;i++)
      {
          var z = y.appendChild(tr.cloneNode(true));
          for (var j=0;j<50;j++)
          {
              var a = z.appendChild(td.cloneNode(true));
              a.appendChild(ast.cloneNode(true));
          }
      }
      document.getElementById('writeroot').appendChild(x);
  }
  
  /* INNERHTML 1: concatenate one string */
  
  function inner1()
  {
      removeTable();
      var string = '<div><div>';
      for (var i=0;i<50;i++)
      {
          string += '<div>';
          for (var j=0;j<50;j++)
          {
              string += '<div>' + content +'</div>';
          }
          string += '</div>';
      }
      string += '</div></div>';
      document.getElementById('writeroot').innerHTML = string;
  }
  
  /* INNERHTML 2: push and join */
  
  function inner2()
  {
      removeTable();
      var string = new Array();
      string.push('<div><div>');
      for (var i=0;i<50;i++)
      {
          string.push('<div>');
          for (var j=0;j<50;j++)
          {
              string.push('<div>' + content + '</div>');
          }
          string.push('</div>');
      }
      string.push('</div></div>');
      var writestring = string.join('');
      document.getElementById('writeroot').innerHTML = writestring;
  }
</script>
    

Preparation code output

<div id="writeroot" style="display:none"></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
w3cdom1
w3cdom1()
pending…
w3cdom2
w3cdom2()
pending…
inner1
inner1()
pending…
inner2
inner2()
pending…

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

Compare results of other browsers

0 Comments