Benchmark: DOM structure: bottom up vs top down vs DocumentFragment

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Bottom up
Top down
Real top down
Top down (DocumentFragment)
Mixed with append()

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

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.1 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
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

DOM structure: bottom up vs top down vs DocumentFragment (version: 0)

Comparing performance of: Bottom up vs Top down vs Real top down vs Top down (DocumentFragment) vs Mixed with append()

Created: one year ago by: Guest

Jump to the latest result

Bottom up

Top down

Real top down

Top down (DocumentFragment)

Mixed with append()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A