Run results for: JS: append vs appendChild multiple elements with spread syntax

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:136.0) Gecko/20100101 Firefox/136.0

Browser: Firefox 136

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

for ... appendChild

388K/s

for ... append

352K/s

append with spread syntax

301K/s

View exact numbers

Test name	Executions per second
✓ for ... appendChild	387,781 Ops/sec
for ... append	352,486 Ops/sec
append with spread syntax	300,712 Ops/sec

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

const container = document.getElementById("container");
const paragraphs = [];
for (c of "abcdefg") {
  const p = document.createElement("p");
  p.textContent = c;
  paragraphs.push(p);
}

Tests:

append with spread syntax
container.append(...paragraphs);
for ... append
for (const p of paragraphs) { container.append(p); }
for ... appendChild
for (const p of paragraphs) { container.appendChild(p); }

Run results for: JS: append vs appendChild multiple elements with spread syntax

Comparing performance of: for (c of children) append(c) vs append(...c) vs for (c of children) appendChild(c)

append with spread syntax

for ... append

for ... appendChild