Run results for: appendChild cycles vs documentFragment

Run details:

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

Browser: Chrome 129

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

appendChild w/ requestAnimationFrame

2.9M/s

append documentFragment w/ requestAnimationFrame

273K/s

appendChild

164K/s

append documentFragment

150K/s

View exact numbers

Test name	Executions per second
✓ appendChild w/ requestAnimationFrame	2,914,925 Ops/sec
append documentFragment w/ requestAnimationFrame	273,273 Ops/sec
appendChild	163,622 Ops/sec
append documentFragment	149,511 Ops/sec

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