Run results for: JS: append vs prepend vs insertBefore vs appendChild vs insertAdjacentElement in a populated table

The similar tests I found here "test" adding one single node to another singe node. Those tests are quite useless for real world situations. The use case here is that the rows array is sorted (not included) and then the table is restructured accordingly.

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Browser: Chrome 124

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

append

68/s

appendChild

66/s

insertAdjacentElement

66/s

prepend

64/s

insertBefore

5/s

View exact numbers

Test name	Executions per second
✓ append	68 Ops/sec
appendChild	66 Ops/sec
insertAdjacentElement	66 Ops/sec
prepend	64 Ops/sec
insertBefore	5 Ops/sec

HTML Preparation code:

<table><tbody id="body"></tbody></table>

Script Preparation code:

var rows = [];
for (var i = 0; i < 10000; ++i) {
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    cell.appendChild(document.createTextNode(i));
    row.appendChild(cell);
    body.appendChild(row);
    rows.push(row);
}
var nodes = body.childNodes;

Tests:

append
for (var i = 0; i < 10000; ++i) { body.append(rows[i]); }
prepend
for (var i = 0; i < 10000; ++i) { body.prepend(rows[i]); }
insertBefore
for (var i = 0; i < 10000; ++i) { body.insertBefore(rows[9999 - i], nodes[i]); }
appendChild
for (var i = 0; i < 10000; ++i) { body.appendChild(rows[i]); }
insertAdjacentElement
for (var i = 0; i < 10000; ++i) { body.insertAdjacentElement("beforeend",rows[i]); }