createElement vs cloneNode (v3)

Revision 3 of this benchmark created on

Description

When creating many elements that are exactly the same, is it faster to create all manually or to create one and cloneNode() the rest?

Preparation HTML

<script>
  function createTable() {
    var tr, td, x, y, table = document.createElement('table');
    for (y = 0; y < 32; ++y) {
      tr = document.createElement('tr');
      for (x = 0; x < 32; ++x) {
        td = document.createElement('td');
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    return table;
  }
</script>

Setup

var tables = new Array(100),
        len = tables.length;

Test runner

Ready to run.

Testing in
TestOps/sec
createElement
for (var i = 0; i < len; ++i) {
  tables[i] = createTable();
}
ready
cloneNode
var table = createTable();
tables[0] = table;
for (var i = 1; i < len; ++i) {
  tables[i] = table.cloneNode(true);
}
ready

Revisions

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