Benchmark: DocumentFragment vs (multiple) append

HTML Preparation code:

<div id="wrap"></div>

Tests:

DocumentFragment append
const fragment = new DocumentFragment(); for (let i = 0; i < 1000; i++) { const element = document.createElement('p'); fragment.appendChild(element); } document.querySelector("#wrap").appendChild(fragment);
(multiple) Node.append
const list = []; for (let i = 0; i < 1000; i++) { const element = document.createElement('p'); list.push(element); } document.querySelector("#wrap").append(...list);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DocumentFragment append
(multiple) Node.append

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 121 on Android

View result in a separate tab

Test name	Executions per second
DocumentFragment append	416.9 Ops/sec
(multiple) Node.append	211.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its test cases to explain what's being tested, compared, and considered.

**Benchmark Overview**

The benchmark measures the performance of two approaches for adding multiple elements to the DOM: using a `DocumentFragment` and appending individual elements multiple times.

**Script Preparation Code**

There is no script preparation code provided. This means that the JavaScript engine should start with a clean slate, without any unnecessary overhead or setup.

**Html Preparation Code**

The HTML preparation code creates a basic structure:
```html
<div id="wrap"></div>
```
This is used as a container for appending elements.

**Individual Test Cases**

There are two test cases:

1. **DocumentFragment append**
The benchmark definition code uses a `DocumentFragment` to create a new, empty fragment:
```javascript
const fragment = new DocumentFragment();
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('p');
  fragment.appendChild(element);
}
```
This approach allows for efficient batch appending of elements to the DOM. When appending multiple elements at once, the browser can optimize the process by reusing the DOM nodes and avoiding unnecessary DOM mutations.

2. **(multiple) Node.append**
The second test case uses an array to store individual elements:
```javascript
const list = [];
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('p');
  list.push(element);
}
document.querySelector("#wrap").append(...list);
```
This approach involves creating multiple DOM nodes and then appending them all at once using the `append` method. While this might seem efficient, it can be slower than batch appending due to the overhead of creating individual DOM nodes.

**Comparison**

The benchmark compares the performance of these two approaches:

* **DocumentFragment append**: This approach is optimized for batch appending and is expected to perform better when adding multiple elements at once.
* **(multiple) Node.append**: This approach creates multiple DOM nodes and then appends them, which can lead to slower performance due to the overhead of creating individual nodes.

**Pros and Cons**

Pros of `DocumentFragment append`:

* Efficient batch appending for large numbers of elements
* Optimized by browsers for reusing DOM nodes

Cons:

* Requires a separate fragment object creation
* May have slower initial appends if not in a loop

Pros of `(multiple) Node.append`:

* Easy to implement and understand
* Does not require additional memory allocation or DOM node reuse optimizations

Cons:

* Can lead to slower performance due to creating multiple individual DOM nodes
* Not optimized for batch appending

**Library Consideration**

There is no specific library being used in this benchmark. However, using a `DocumentFragment` requires some knowledge of the browser's internal DOM implementation and how fragments can be efficiently batch appended.

**Special JS Feature or Syntax**

The benchmark uses modern JavaScript features like:

* `const` declarations
* Arrow functions (`=>`)
* Template literals (backticks ``)

These features are widely supported in modern browsers, but may not work in older browsers.

Related benchmarks:

DocumentFragment vs (multiple) append (version: 0)

Comparing performance of: DocumentFragment append vs (multiple) Node.append

Created: 3 years ago by: Guest

Jump to the latest result

DocumentFragment append

(multiple) Node.append

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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