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/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Browser: Safari 16

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
append with spread syntax	464043.2 Ops/sec
for ... append	619432.7 Ops/sec
for ... appendChild	800431.2 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