Benchmark: appendChild with DocumentFragmenet vs append Array of Elements

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var container = document.getElementById('container');
var fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
var elements = [];
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  elements.push(li)
}

Tests:

appendChild fragment
container.appendChild(fragment)
appendChildren
container.append(...elements)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild fragment
appendChildren

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

appendChild fragment

9.5M/s

appendChildren

3K/s

View exact numbers

Test name	Executions per second
✓ appendChild fragment	9,502,907 Ops/sec
appendChildren	3,244 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark being tested on MeasureThat.net.

**Benchmark Purpose:**
The benchmark compares two approaches for appending elements to an HTML container:

1. **appendChild with DocumentFragment**: This approach creates a `DocumentFragment` object, populates it with 1000 HTML elements (li tags), and then appends the fragment to the container.
2. **append Array of Elements**: This approach creates an array of 1000 HTML elements (li tags) and appends them directly to the container using the `append()` method.

**Options Comparison:**
The benchmark tests two options:

1. **appendChild with DocumentFragment**:
	* Pros:
		+ Can reduce DOM mutations, which can improve performance in some cases.
		+ Allows for more efficient appending of elements, as it doesn't require creating a new DOM tree for each element.
	* Cons:
		+ Requires creating a `DocumentFragment` object and updating its contents, which may introduce overhead.
2. **append Array of Elements**:
	* Pros:
		+ Simple and straightforward approach that doesn't require any additional objects or methods.
	* Cons:
		+ Can result in more DOM mutations, which can negatively impact performance.

**Library:**
None of the benchmark code uses external libraries.

**Special JS Feature/Syntax:**
The benchmark uses modern JavaScript features such as:

1. **Let and For-of Loops**: Used for creating the arrays of elements.
2. **Template Literals**: Used for generating the li tags with dynamic content (e.g., `Item ${i}`).

**Other Alternatives:**
For appending elements to an HTML container, other alternatives could include:

1. Using `innerHTML` or `outerHTML` methods to append HTML strings directly to the container.
2. Creating a new DOM element and then appending it to the container using `appendChild()`.

However, these approaches are generally considered less efficient than using a `DocumentFragment` object or an array of elements with `append()` method, especially for large datasets.

**Benchmark Preparation Code:**
The provided script preparation code creates:

1. A container element with id "container".
2. A fragment object and populates it with 1000 li tags.
3. An empty array to store the individual li tags.
4. The script then uses a loop to create 1000 li tags, push them onto the array, and append the fragment or elements directly to the container.

**Individual Test Cases:**
The benchmark defines two test cases:

1. `appendChild fragment`: Tests appending the fragment object to the container.
2. `appendChildren`: Tests appending the array of individual elements to the container using the `append()` method.

These test cases allow MeasureThat.net to compare the performance of these two approaches in a controlled environment.

appendChild with DocumentFragmenet vs append Array of Elements (version: 0)

Comparing performance of: `appendChild fragment vs appendChildren`

Created: 2 years ago by: Registered User

Go to the latest result

appendChild fragment

appendChildren

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

appendChild with DocumentFragmenet vs append Array of Elements (version: 0)

Comparing performance of: appendChild fragment vs appendChildren

Created: 2 years ago by: Registered User

Go to the latest result

appendChild fragment

appendChildren

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `appendChild fragment vs appendChildren`