Benchmark: JS: append vs appendChild multiple elements with spread syntax

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); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append with spread syntax
for ... append
for ... appendChild

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

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

Related benchmarks:

JS: append vs appendChild multiple elements with spread syntax (version: 1)

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

Comparing performance of: append with spread syntax vs for ... append vs for ... appendChild

Created: one year ago by: Registered User

Jump to the latest result

append with spread syntax

for ... append

for ... appendChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A