High Performance javascript innerhtml

JavaScript performance comparison

Test case created

Preparation code

<div id="here"></div>

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
innerHTML
function tableInnerHTML() {
    var i, h = ['<table border="1" width="100%">'];
    h.push('<thead>');
    h.push('<tr><th>id<\/th><th>yes?<\/th><th>name<\/th><th>url<\/th><th>action<\/th><\/tr>');
    h.push('<\/thead>');
    h.push('<tbody>');
    for (i = 1; i <= 1000; i++) {
        h.push('<tr><td>');
        h.push(i);
        h.push('<\/td><td>');
        h.push('And the answer is... ' + (i % 2 ? 'yes' : 'no'));
        h.push('<\/td><td>');
        h.push('my name is #' + i);
        h.push('<\/td><td>');
        h.push('<a href="http://example.org/' + i + '.html">http://example.org/' + i + '.html<\/a>');
        h.push('<\/td><td>');
        h.push('<ul>');
        h.push(' <li><a href="edit.php?id=' + i + '">edit<\/a><\/li>');
        h.push(' <li><a href="delete.php?id="' + i + '-id001">delete<\/a><\/li>');
        h.push('<\/ul>');
        h.push('<\/td>');
        h.push('<\/tr>');
    }
    h.push('<\/tbody>');
    h.push('<\/table>');
    document.getElementById('here').innerHTML = h.join('');
};

tableInnerHTML();
pending…
DOM methods
function tableDOM() {
  var i, table, thead, tbody, tr, th, td, a, ul, li;
  tbody = document.createElement('tbody');
  for (i = 1; i <= 1000; i++) {
    tr = document.createElement('tr');
    td = document.createElement('td');
    td.appendChild(document.createTextNode((i % 2) ? 'yes' : 'no'));
    tr.appendChild(td);
    td = document.createElement('td');
    td.appendChild(document.createTextNode(i));
    tr.appendChild(td);
    td = document.createElement('td');
    td.appendChild(document.createTextNode('my name is #' + i));
    tr.appendChild(td);
    a = document.createElement('a');
    a.setAttribute('href', 'http://example.org/' + i + '.html');
    a.appendChild(document.createTextNode('http://example.org/' + i +
      '.html'));
    td = document.createElement('td');
    td.appendChild(a);
    tr.appendChild(td);
    ul = document.createElement('ul');
    a = document.createElement('a');
    a.setAttribute('href', 'edit.php?id=' + i);
    a.appendChild(document.createTextNode('edit'));
    li = document.createElement('li');
    li.appendChild(a);
    ul.appendChild(li);
    a = document.createElement('a');
    a.setAttribute('href', 'delete.php?id=' + i);
    a.appendChild(document.createTextNode('delete'));
    li = document.createElement('li');
    li.appendChild(a);
    ul.appendChild(li);
    td = document.createElement('td');
    td.appendChild(ul);
    tr.appendChild(td);
    tbody.appendChild(tr);
  }
  tr = document.createElement('tr');
  th = document.createElement('th');
  th.appendChild(document.createTextNode('yes?'));
  tr.appendChild(th);
  th = document.createElement('th');
  th.appendChild(document.createTextNode('id'));
  tr.appendChild(th);
  th = document.createElement('th');
  th.appendChild(document.createTextNode('name'));
  tr.appendChild(th);
  th = document.createElement('th');
  th.appendChild(document.createTextNode('url'));
  tr.appendChild(th);
  th = document.createElement('th');
  th.appendChild(document.createTextNode('action'));
  tr.appendChild(th);
  thead = document.createElement('thead');
  thead.appendChild(tr);
  table = document.createElement('table');
  table.setAttribute('border', 1);
  table.setAttribute('width', '100%');
  table.appendChild(thead);
  table.appendChild(tbody);
  document.getElementById('here').appendChild(table);
};

tableDOM();
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

Add a comment