Run results for: DOM structure: bottom up vs top down vs DocumentFragment

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 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
Bottom up	297121.8 Ops/sec
Top down	329882.2 Ops/sec
Real top down	311796.8 Ops/sec
Top down (DocumentFragment)	273996.3 Ops/sec
Mixed with append()	265743.9 Ops/sec

HTML Preparation code:

<div id='container'></div>

Tests:

Bottom up
const container = document.getElementById('container'); const ul = document.createElement('ul'); for (const d of '123456') { const li = document.createElement('li'); li.textContent = d; ul.appendChild(li); } const div = document.createElement('div'); div.appendChild(ul); container?.appendChild(div).remove();
Top down
const container = document.getElementById('container'); const div = document.createElement('div'); const ul = div.appendChild(document.createElement('ul')); for (const d of '123456') { const li = document.createElement('li'); li.textContent = d; ul.appendChild(li); } container?.appendChild(div).remove();
Real top down
const container = document.getElementById('container'); const ul = container .appendChild(document.createElement('div')) .appendChild(document.createElement('ul')); for (const d of '123456') { const li = document.createElement('li'); li.textContent = d; ul.appendChild(li); } container?.firstElementChild?.remove();
Top down (DocumentFragment)
const container = document.getElementById('container'); const fragment = document.createDocumentFragment(); const ul = fragment .appendChild(document.createElement('div')) .appendChild(document.createElement('ul')); for (const d of '123456') { const li = document.createElement('li'); li.textContent = d; ul.appendChild(li); } container.appendChild(fragment); container?.firstElementChild?.remove();
Mixed with append()
const container = document.getElementById('container'); const lis = Array.from('123456').map((d) => { const li = document.createElement('li'); li.textContent = d; return li; }); const div = document.createElement('div'); const ul = div.appendChild(document.createElement('ul')) .append(...lis); container?.appendChild(div).remove();

Run results for: DOM structure: bottom up vs top down vs DocumentFragment

Bottom up

Top down

Real top down

Top down (DocumentFragment)

Mixed with append()