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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Safari/605.1.15

Browser: Safari 15

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

insertAdjacentElement

126/s

appendChild

124/s

prepend

120/s

append

119/s

insertBefore

2/s

View exact numbers

Test name	Executions per second
✓ insertAdjacentElement	126 Ops/sec
appendChild	124 Ops/sec
prepend	120 Ops/sec
append	119 Ops/sec
insertBefore	2 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]); }