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

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Linux

View result in a separate tab

Test name	Executions per second
Bottom up	150377.8 Ops/sec
Top down	167638.9 Ops/sec
Real top down	151603.0 Ops/sec
Top down (DocumentFragment)	142057.3 Ops/sec
Mixed with append()	165763.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a benchmark test on MeasurThat.net, which compares the performance of different approaches when creating and manipulating DOM elements in JavaScript.

**What is tested**

The test measures the time it takes to create and append DOM elements using various methods:

1. **Bottom up**: Creating each element individually and appending them to the container.
2. **Top down**: Creating the container, then appending a `div` and an `ul` element to it.
3. **Real top down**: Similar to top down, but using `container.appendChild()` instead of `appendChild(document.createElement('div'))`.
4. **Top down (DocumentFragment)**: Using a `document.createDocumentFragment()` to create the DOM structure, similar to top down.
5. **Mixed with append()**: Creating an array of elements and appending them to the container using `appendChild` with the spread operator.

**Options compared**

The test compares two main approaches:

1. **Sequential creation**: Each element is created individually and appended to the container (bottom up).
2. **Batched creation**: Elements are created in bulk and appended to the container at once (top down, real top down, and mixed with append%).

**Pros and cons of each approach**

* **Bottom up**:
	+ Pros: Simple, easy to understand.
	+ Cons: Can be slower due to sequential creation.
* **Top down**:
	+ Pros: Faster due to batched creation.
	+ Cons: Requires multiple DOM element operations (creation and appending).
* **Real top down**:
	+ Pros: Similar to top down but with fewer DOM element operations.
	+ Cons: Still requires additional operations to append the fragment.
* **Top down (DocumentFragment)**:
	+ Pros: Faster than traditional top down due to batched creation.
	+ Cons: Requires creating a `document.createDocumentFragment()` instance, which may incur additional overhead.
* **Mixed with append()**:
	+ Pros: Similar to batched creation but uses the spread operator for appending.
	+ Cons: May be slower due to additional array operations.

**Library usage**

The test uses the following libraries:

* None explicitly mentioned. However, it's worth noting that `document.createDocumentFragment()` is a built-in JavaScript feature.

**Special JS features or syntax**

None are explicitly used in this benchmark.

**Alternatives**

Other approaches could be compared in a similar benchmark, such as:

* Using a virtual DOM library like React or Vue.js to compare performance.
* Implementing a custom DOM node factory function for faster creation.
* Comparing the performance of different JavaScript engines (e.g., V8 vs. SpiderMonkey).

These alternatives would require modifying the benchmark test to accommodate the new approaches and libraries.

Related benchmarks:

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: 3 years 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>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):