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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser: Chrome 134

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

for ... appendChild

512K/s

append with spread syntax

405K/s

for ... append

376K/s

View exact numbers

Test name	Executions per second
✓ for ... appendChild	511,906 Ops/sec
append with spread syntax	404,665 Ops/sec
for ... append	376,422 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