Benchmark: DocumentFragment test

HTML Preparation code:

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

Tests:

No frag
var elements = []; for(var i=20; i--;) elements.push(document.createElement("div")); var e = document.getElementsByClassName("container"); for(var i=e.length; i--;) { for(var j=20; j--;) e[i].appendChild(elements[j].cloneNode(true)); }
With frag
var frag = document.createDocumentFragment(); for(var i=20; i--;) frag.appendChild(document.createElement("div")); var e = document.getElementsByClassName("container"); for(var i=e.length; i--;) e[i].appendChild(frag.cloneNode(true));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
No frag
With frag

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 OPR/94.0.0.0

Browser/OS: Opera 94 on Windows

View result in a separate tab

Test name	Executions per second
No frag	8.2 Ops/sec
With frag	29.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of creating and manipulating DOM elements in JavaScript, specifically the difference between using a `DocumentFragment` and not using it.

**Options compared**

Two test cases are compared:

1. **"No frag"**: This test case uses a traditional approach to create and append multiple DOM elements without using a `DocumentFragment`. It creates an array of 20 elements, loops through each element, and appends it to the DOM using `appendChild`.
2. **"With frag"**: This test case uses a `DocumentFragment` to optimize the creation and appending of DOM elements. A fragment is created, and then looped through while appending the same 20 elements.

**Pros and Cons**

* **"No frag"**:
	+ Pros: Simpler code, easier to understand.
	+ Cons: Can be less efficient due to repeated DOM mutations (e.g., `appendChild`), which can lead to performance issues.
* **"With frag"**:
	+ Pros: More efficient by reducing the number of DOM mutations, making it suitable for large datasets or complex layouts.
	+ Cons: Requires a slight increase in complexity and understanding of the fragment API.

**Library**

In this benchmark, the `DocumentFragment` is a built-in JavaScript object that allows you to group multiple elements together without actually adding them to the DOM. Its purpose is to optimize DOM manipulation by reducing the number of mutations.

**Special JS feature or syntax**

None mentioned in the provided code snippets, but it's worth noting that some other features like `requestIdleCallback` or `Web Workers` might be used in more complex scenarios to further optimize performance.

**Other alternatives**

If you need to create and manipulate a large number of DOM elements for performance-critical applications, consider using:

1. **Virtual DOM libraries**: Libraries like React's Virtual DOM or MobX's Virtual DOM can help reduce the overhead of DOM mutations by storing a virtual representation of your UI.
2. **Async operations**: Using async/await or `requestIdleCallback` can help optimize performance by deferring non-critical tasks to idle times or background threads.

Keep in mind that these alternatives might add complexity to your code, so it's essential to weigh the benefits against the trade-offs.

Related benchmarks:

DocumentFragment test (version: 0)

Comparing performance of: No frag vs With frag

Created: 3 years ago by: Guest

Jump to the latest result

No frag

With frag

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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