Benchmark: AppendChild vs DocumentFragment

HTML Preparation code:

<select id="test"></select>

Tests:

Appending HTML strings
(() => { const dropdown = document.querySelector('select#test'); for (let i=0; i<5000; i++) { dropdown.append(`<option id="${i}" value="${i}">${i}</option>`) } })();
DocumentFragment #1
(() => { const dropdown = document.querySelector('select#test'); const fragment = document.createDocumentFragment(); for (let i=0; i<5000; i++) fragment.append(`<option id="${i}" value="${i}">${i}</option>`); dropdown.appendChild(fragment); })();
DocumentFragment #2
(() => { const dropdown = document.querySelector('select#test'); const fragment = document.createDocumentFragment(); for (let i=0; i<5000; i++) { const option = document.createElement('option'); option.value = `${i}`; option.setAttribute('id', `${i}`); option.textContent = `${i}`; fragment.appendChild(option); } dropdown.appendChild(fragment); })();
Appending DOM objects
(() => { const dropdown = document.querySelector('select#test'); for (let i=0; i<5000; i++) { const option = document.createElement('option'); option.value = `${i}`; option.setAttribute('id', `${i}`); option.textContent = `${i}`; dropdown.appendChild(option); } })();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Appending HTML strings
DocumentFragment #1
DocumentFragment #2
Appending DOM objects

Fastest: N/A

Slowest: N/A

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/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Appending HTML strings	733.6 Ops/sec
DocumentFragment #1	552.0 Ops/sec
DocumentFragment #2	120.7 Ops/sec
Appending DOM objects	151.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark definition is a JSON object that contains metadata about the test case, including its name, description, script preparation code, and HTML preparation code. In this case, we have a simple select element with an ID of "test" in our HTML preparation code:

```html
"<select id=\"test\"></select>"
```

**Options Compared**

The benchmark compares four different approaches to appending options to the select element:

1. **Appending HTML strings**: This approach creates a new option element for each iteration and appends it directly to the select element.
2. **DocumentFragment**: This approach creates a DocumentFragment, which is an object that can hold multiple DOM elements without actually adding them to the document. We then append all the options to this fragment and finally append the fragment to the select element.
3. **Appending DOM objects**: Similar to the first approach, but instead of creating HTML strings, we create new option elements directly using the `document.createElement()` method.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Appending HTML strings**:
	+ Pros: Simple and easy to understand.
	+ Cons: Can lead to slower performance due to repeated DOM mutations (e.g., adding or removing elements).
* **DocumentFragment**:
	+ Pros: Reduces DOM mutations, as all the options are added to a single fragment before appending it to the select element. This can lead to better performance, especially when dealing with large datasets.
	+ Cons: Requires creating an additional DocumentFragment object and might be less intuitive for some developers.
* **Appending DOM objects**:
	+ Pros: Similar to Appending HTML strings, but uses `document.createElement()` instead of string concatenation.
	+ Cons: Still leads to repeated DOM mutations, which can negatively impact performance.

**Library Usage**

None of the test cases use any external libraries. The only JavaScript features used are:

* `for` loops
* `document.querySelector()`
* `document.createDocumentFragment()`
* `element.appendChild()`

**Special JS Features**

No special JavaScript features or syntax is used in these benchmarks. All tests follow standard JavaScript syntax and semantics.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few suggestions:

1. **Use a virtual DOM library**: Libraries like React or Virtual DOM can help reduce the number of DOM mutations by using a virtual representation of the UI. However, this approach may introduce additional overhead due to the need for reconciliation and updating.
2. **Use a more efficient option element creation method**: Some browsers provide a `createOption()` method on `DocumentFragment` that can create an option element more efficiently than the `createElement()` method used in this benchmark.
3. **Benchmarks with different datasets or scenarios**: Experimenting with varying dataset sizes, number of iterations, or even changing the structure of the HTML elements can help identify performance hotspots and optimize the code for specific use cases.

Keep in mind that microbenchmarks like these are meant to be small-scale tests, focusing on specific optimization opportunities. Larger benchmarks might uncover different performance characteristics and require more comprehensive testing approaches.

Related benchmarks:

AppendChild vs DocumentFragment (version: 0)

Comparing performance of: Appending HTML strings vs DocumentFragment #1 vs DocumentFragment #2 vs Appending DOM objects

Created: one year ago by: Guest

Jump to the latest result

Appending HTML strings

DocumentFragment #1

DocumentFragment #2

Appending DOM objects

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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