Build Table via Markup vs DOM (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script>
  var rows = [];
  (function() {
    var counter;
    for (counter = 0; counter < 100; ++counter) {
      rows.push([counter, counter, counter, counter, counter]);
    }
  })();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Using HTML string concat
var target, markup, row, x, y;
markup = "<table><tbody>";
for (y = 0; y < rows.length; ++y) {
  markup += "<tr>";
  row = rows[y];
  for (x = 0; x < row.length; ++x) {
    markup += "<td>";
    markup += row[x];
    markup += "</td>";
  }
  markup += "</tr>";
}
markup += "</tbody></table>";
target = document.createElement('div');
target.innerHTML = markup;
document.body.appendChild(target);
document.body.removeChild(target);
ready
Using HTML array join full
var target, markup, row, x, y;
markup = ["<table><tbody>"];
for (y = 0; y < rows.length; ++y) {
  markup.push("<tr>");
  row = rows[y];
  for (x = 0; x < row.length; ++x) {
    markup.push("<td>");
    markup.push(row[x]);
    markup.push("</td>");
  }
  markup.push("</tr>");
}
markup.push("</tbody></table>");
target = document.createElement('div');
target.innerHTML = markup.join("");
document.body.appendChild(target);
document.body.removeChild(target);
ready
Using HTML array join moderate
var target, markup, row, x, y;
markup = ["<table><tbody>"];
for (y = 0; y < rows.length; ++y) {
  markup.push("<tr>");
  row = rows[y];
  for (x = 0; x < row.length; ++x) {
    markup.push("<td>" + row[x] + "</td>");
  }
  markup.push("</tr>");
}
markup.push("</tbody></table>");
target = document.createElement('div');
target.innerHTML = markup.join("");
document.body.appendChild(target);
document.body.removeChild(target);
ready
Using DOM API
var target, markup, row, tbody, tr, td, x, y;
tbody = document.createElement('tbody');
for (y = 0; y < rows.length; ++y) {
  tr = document.createElement('tr');
  row = rows[y];
  for (x = 0; x < row.length; ++x) {
    td = document.createElement('td');
    td.innerHTML = row[x];
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}
target = document.createElement('table');
target.appendChild(tbody);
document.body.appendChild(target);
document.body.removeChild(target);
ready

Revisions

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