create a large amount of complex elements innerHTML vs createElement

JavaScript performance comparison

Test case created

Preparation code

<div id="container"></div>
 
<script>
Benchmark.prototype.setup = function() {
    document.getElementById('container').innerHTML = '';
   
    function createElements() {
      var root = document.createElement('div'),
        tag = '',
        child = '',
        tr = '',
        text = '',
        td = '',
        tbody = '';
   
      root.setAttribute("class", "clw-i row");
      root.setAttribute("style", "width: 732px; height: 72px; left: 0px; top: 102px;");
   
      child = document.createElement('div');
      child.setAttribute("class", "clickable type-listview base-template n4-widget n4-template");
      root.appendChild(child);
   
      tag = child;
      child = document.createElement('table');
      child.setAttribute("class", "tmplt-t listview");
      tag.appendChild(child);
   
      tag = child;
      child = document.createElement('tbody');
      tag.appendChild(child);
   
      child = document.createElement('tbody');
      tag.appendChild(child);
      tbody = child;
   
      tag = child;
      child = document.createElement('tr');
      child.setAttribute("class", "laL r-1");
      tag.appendChild(child);
   
      tr = child;
      tag = child;
      child = document.createElement('td');
      child.setAttribute("class", "min-height");
      tag.appendChild(child);
   
      tag = child;
      child = document.createElement('div');
      child.setAttribute("class", "min-height");
      tag.appendChild(child);
   
      tag = tr;
      child = document.createElement('td');
      child.setAttribute("class", "templ-td l td-1");
      child.setAttribute("colspan", "3");
      child.setAttribute("rowspan", "3");
      tag.appendChild(child);
   
      tag = child;
      child = document.createElement('a');
      child.setAttribute("actionid", "0");
      child.setAttribute("style", "background-image :url(/repo/1.0/n4.ide.localdev/desktopui_js-0.41.0/images/common/enfore.png); width:50px; height: 50px; ");
      child.setAttribute("class", "n4-graphic-action");
      tag.appendChild(child);
   
      tag = tr;
      child = document.createElement('td');
      child.setAttribute("class", "templ-td a td-2");
      child.setAttribute("colspan", "4");
      tag.appendChild(child);
      tag = child;
      td = child;
   
      child = document.createElement('div');
      child.setAttribute("class", " emphasized bold x-large                n4-widget n4-output ");
      text = document.createTextNode("Test 11 A");
      child.appendChild(text);
      tag.appendChild(child);
   
      tag = td;
      child = document.createElement('div');
      child.setAttribute("class", "border left de-em");
      tag.appendChild(child);
      tag = child;
   
      tag = tr;
      child = document.createElement('td');
      child.setAttribute("class", "templ-td L td-3 last-td right-al");
      child.setAttribute("colspan", "2");
      tag.appendChild(child);
   
      tag = child;
      child = document.createElement('div');
      child.setAttribute("class", " grey                  n4-widget n4-output ");
      text = document.createTextNode("keine E-Mail");
      child.appendChild(text);
   
      tag.appendChild(child);
   
      tag = tbody;
      child = document.createElement('tr');
      child.setAttribute("class", "laL r-2");
      tag.appendChild(child);
      tag = child;
      tr = child;
      child = document.createElement('td');
      child.setAttribute("class", "min-height");
      tag.appendChild(child);
      tag = child;
      child = document.createElement('div');
      child.setAttribute("class", "min-height");
   
      tag.appendChild(child);
      tag = tr;
      child = document.createElement('td');
      child.setAttribute("class", "templ-td a td-2");
      child.setAttribute("colspan", "4");
      tag.appendChild(child);
      tag = child;
      child = document.createElement('div');
      child.setAttribute("class", " grey                  n4-widget n4-output ");
      text = document.createTextNode("keine Adresse");
      child.appendChild(text);
   
      tag.appendChild(child);
      tag = tr;
      child = document.createElement('td');
      child.setAttribute("class", "templ-td L td-3 last-td right-al");
      child.setAttribute("colspan", "2");
      tag.appendChild(child);
      tag = child;
      child = document.createElement('div');
      child.setAttribute("class", " grey                  n4-widget n4-output ");
      text = document.createTextNode("keine E-Mail");
      text = document.createTextNode("kein Telefon");
      child.appendChild(text);
   
      tag.appendChild(child);
      tag = tbody;
      child = document.createElement('tr');
      child.setAttribute("class", "laL r-3");
      tag.appendChild(child);
      tag = child;
      tr = child;
      child = document.createElement('td');
      child.setAttribute("class", "min-height");
      tag.appendChild(child);
   
      tag = child;
      child = document.createElement('div');
      child.setAttribute("class", "min-height");
   
      tag.appendChild(child);
      tag = tr;
      child = document.createElement('td');
      child.setAttribute("class", "templ-td a td-2");
      child.setAttribute("colspan", "4");
      tag.appendChild(child);
      tag = child;
      child = document.createElement('div');
      child.setAttribute("class", "                   n4-widget n4-output ");
   
      tag.appendChild(child);
      tag = tr;
      child = document.createElement('td');
      child.setAttribute("class", "templ-td L td-3 last-td right-al");
      child.setAttribute("colspan", "2");
      tag.appendChild(child);
      tag = child;
      child = document.createElement('div');
      child.setAttribute("class", " grey                  n4-widget n4-output ");
      text = document.createTextNode("keine Webseite");
      child.appendChild(text);
   
      tag.appendChild(child);
      child = document.createElement('div');
      child.setAttribute("class", "funbar-hint");
      tag.appendChild(child);
   
      return root;
    }
   
    function createFromRaw() {
      var rawHtml = '  <div class="clickable type-listview base-template n4-widget n4-template">' +
        '    <table class="tmplt-t listview">' +
        '      <tbody>' +
        '      </tbody>' +
        '      <tbody>' +
        '        <tr class="laL r-1">' +
        '          <td class="min-height">' +
        '            <div class="min-height">' +
        '            </div>' +
        '          </td>' +
        '          <td class="templ-td l td-1" colspan="3" rowspan="3">' +
        '            <a actionid="0" style="background-image :url(/repo/1.0/n4.ide.localdev/desktopui_js-0.41.0/images/common/enfore.png); width:50px; height: 50px; " class="n4-graphic-action">' +
        '            </a>' +
        '          </td>' +
        '          <td class="templ-td a td-2" colspan="4">' +
        '            <div class=" emphasized bold x-large                n4-widget n4-output ">' +
        '              Test 11 A</div>' +
        '            <div class="border left de-em">' +
        '            </div>' +
        '          </td>' +
        '          <td class="templ-td L td-3 last-td right-al" colspan="2">' +
        '            <div class=" grey                  n4-widget n4-output ">' +
        '              keine E-Mail</div>' +
        '          </td>' +
        '        </tr>' +
        '        <tr class="laL r-2">' +
        '          <td class="min-height">' +
        '            <div class="min-height">' +
        '            </div>' +
        '          </td>' +
        '          <td class="templ-td a td-2" colspan="4">' +
        '            <div class=" grey                  n4-widget n4-output ">' +
        '              keine Adresse</div>' +
        '          </td>' +
        '          <td class="templ-td L td-3 last-td right-al" colspan="2">' +
        '            <div class=" grey                  n4-widget n4-output ">' +
        '              kein Telefon</div>' +
        '          </td>' +
        '        </tr>' +
        '        <tr class="laL r-3">' +
        '          <td class="min-height">' +
        '            <div class="min-height">' +
        '            </div>' +
        '          </td>' +
        '          <td class="templ-td a td-2" colspan="4">' +
        '            <div class="                   n4-widget n4-output ">' +
        '            </div>' +
        '          </td>' +
        '          <td class="templ-td L td-3 last-td right-al" colspan="2">' +
        '            <div class=" grey                  n4-widget n4-output ">' +
        '              keine Webseite</div>' +
        '          </td>' +
        '        </tr>' +
        '      </tbody>' +
        '    </table>' +
        '    <div class="funbar-hint">' +
        '    </div>' +
        '  </div>';
   
   
      return rawHtml;
    }
};

Benchmark.prototype.teardown = function() {
    document.getElementById('container').innerHTML = '';
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
raw
var container = document.getElementById('container');

for (var i = 0; i < 100; i++) {
  var raw = createFromRaw(),
    element = document.createElement('div');

  element.setAttribute("class", "clw-i row");
  element.setAttribute("style", "width: 732px; height: 72px; left: 0px; top: 102px;");
  element.innerHTML = raw;

  container.appendChild(element);
}

document.title = document.getElementById('container').innerHTML;
pending…
createElement
var container = document.getElementById('container');

for (var i = 0; i < 100; i++) {
  var element = createElements();
  container.appendChild(element);
}

document.title = document.getElementById('container').innerHTML;
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. Here’s a list of current revisions for this page:

2 comments

Mehdi commented :

this is biased

daniel commented :

firefox rules

Add a comment