insertCell vs innerHTML string building

Benchmark created by Eric Davies on

Description

Calls insertCell in a loop, or builds a string and then sets innerHTML of the tr.

Preparation HTML

<table>
  <tbody>
    <tr id="row">
    </tr>
  </tbody>
</table>

Setup

var runs = 100;
    var row = document.getElementById('row');
    var cell;

Teardown


    row.innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
insertCell
for (var i = 0; i < runs; i++) {
  cell = row.insertCell(-1);
  cell.innerHTML = i;
}
ready
Build string
var str = ""

for (var i = 0; i < runs; i++) {
  str += '<td>' + i + '</td>';
}

row.innerHTML = str;
ready

Revisions

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