Benchmark: appendChild cycles vs documentFragment

HTML Preparation code:

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

Script Preparation code:

var container = document.getElementById('container');
var childrenAmount = 20;
var childrenToAppend = [];

for(let i = 0; i < childrenAmount; i++) {
	childrenToAppend.push(document.createElement('div'))
}

Tests:

appendChild
childrenToAppend.forEach(child => container.appendChild(child));
append documentFragment
var fragment = document.createDocumentFragment(); childrenToAppend.forEach(child => fragment.appendChild(child)); container.appendChild(fragment)
appendChild w/ requestAnimationFrame
requestAnimationFrame(() => { childrenToAppend.forEach(child => container.appendChild(child)); })
append documentFragment w/ requestAnimationFrame
var fragment = document.createDocumentFragment(); childrenToAppend.forEach(child => fragment.appendChild(child)); requestAnimationFrame(() => { container.appendChild(fragment) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild
append documentFragment
appendChild w/ requestAnimationFrame
append documentFragment w/ requestAnimationFrame

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
appendChild	200320.0 Ops/sec
append documentFragment	153125.6 Ops/sec
appendChild w/ requestAnimationFrame	3212219.2 Ops/sec
append documentFragment w/ requestAnimationFrame	313781.2 Ops/sec

Related benchmarks:

appendChild cycles vs documentFragment (version: 0)

Comparing performance of: appendChild vs append documentFragment vs appendChild w/ requestAnimationFrame vs append documentFragment w/ requestAnimationFrame

Created: 4 years ago by: Registered User

Jump to the latest result

appendChild

append documentFragment

appendChild w/ requestAnimationFrame

append documentFragment w/ requestAnimationFrame

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A