Build Table via Markup vs DOM

Benchmark created by T.J. Crowder 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.