Benchmark: DocumentFragment append VS Normal append

HTML Preparation code:

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Script Preparation code:

var elems = [
    document.createElement("hr"),
    text(document.createElement("b"), "Links:"),
    document.createTextNode(" "),
    text(document.createElement("a"), "Link A"),
    document.createTextNode(" | "),
    text(document.createElement("a"), "Link B"),
    document.createTextNode(" | "),
    text(document.createElement("a"), "Link C")
];

function text(node, txt) {
    node.appendChild(document.createTextNode(txt));
    return node;
}

var div = document.getElementsByTagName("div");

Tests:

DocumentFragment append
const fragment = document.createDocumentFragment(); for (let e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } for (let i = 0; i < div.length; i++) { div[i].appendChild(fragment.cloneNode(true)); }
Normal append
for (let i = 0; i < div.length; i++) { for (let e = 0; e < elems.length; e++) { div[i].appendChild(elems[e].cloneNode(true)); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DocumentFragment append
Normal append

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 122 on Linux

View result in a separate tab

Test name	Executions per second
DocumentFragment append	3.2 Ops/sec
Normal append	0.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, its options, pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is designed to compare two approaches for appending HTML elements to a container element:

1. **DocumentFragment append**: This approach uses `document.createDocumentFragment()` to create a fragment that can be appended to multiple elements without causing layout recalculations.
2. **Normal append**: This approach appends each element individually using the `appendChild` method.

**Individual Test Cases**

There are two test cases:

1. **DocumentFragment append**: The benchmark definition is:
```javascript
const fragment = document.createDocumentFragment();
for (let e = 0; e < elems.length; e++) {
  fragment.appendChild(elems[e]);
}
for (let i = 0; i < div.length; i++) {
  div[i].appendChild(fragment.cloneNode(true));
}
```
This test case creates a `documentFragment`, appends all elements from the `elems` array to it, and then clones the fragment and appends it to each element in the `div` array.

2. **Normal append**: The benchmark definition is:
```javascript
for (let i = 0; i < div.length; i++) {
  for (let e = 0; e < elems.length; e++) {
    div[i].appendChild(elems[e].cloneNode(true));
  }
}
```
This test case appends each element from the `elems` array to each element in the `div` array, using the `cloneNode` method to create a copy of each element.

**Latest Benchmark Result**

The latest benchmark result shows the execution time for both test cases on Chrome 129 running on Windows. The results are:

1. **DocumentFragment append**: 2.084134817123413 executions per second
2. **Normal append**: 0.20408163964748383 executions per second

**Pros and Cons**

Advantages of using `documentFragment` for appending elements:

* Improved performance: By using a fragment, the browser can batch updates and avoid unnecessary layout recalculations.
* Reduced DOM mutations: The fragment reduces the number of DOM mutations, which can lead to improved performance.

Disadvantages of using `documentFragment`:

* Additional overhead: Creating a fragment requires additional memory allocation and garbage collection.
* CloneNode() can be slow: Cloning elements using `cloneNode(true)` can be slower than appending elements directly.

Advantages of normal append:

* Simple and straightforward: Appending elements directly is a simple and well-established pattern.
* No additional overhead: There is no additional memory allocation or garbage collection required.

Disadvantages of normal append:

* Potential performance issues: Repeatedly calling `appendChild` can lead to layout recalculations and other performance issues.

**Other Considerations**

When deciding between these two approaches, consider the following factors:

* Performance: If you need optimal performance, using a `documentFragment` may be the better choice.
* Complexity: If you're already working with complex DOM structures, normal append might be simpler to implement.
* Browser support: Modern browsers generally support both approaches, but older browsers might have issues with `cloneNode(true)`.

Overall, this benchmark highlights the benefits of using a `documentFragment` for appending elements, particularly in terms of improved performance. However, it's essential to weigh these benefits against potential additional overhead and consider your specific use case when making a decision.

Related benchmarks:

DocumentFragment append VS Normal append (version: 0)

Code from https://johnresig.com/blog/dom-documentfragments/

Comparing performance of: DocumentFragment append vs Normal append

Created: 5 years ago by: Guest

Jump to the latest result

DocumentFragment append

Normal append

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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