Benchmark: DocumentFragment vs insertAdjacentHTML

HTML Preparation code:

<div id='test'></div>

Tests:

DocumentFragment
const fragment = document.createDocumentFragment() for (i = 0; i < 1000; i++) { const innerDiv = document.createElement("div"); innerDiv.className = "MyClass" fragment.appendChild(innerDiv); } document.getElementById("test").append(fragment);
insertAdjacentHTML
html = "" for (i = 0; i < 1000; i++) { html += "<div class='MyClass'></div>"; } document.getElementById("test").insertAdjacentHTML("beforeend", html);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DocumentFragment
insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

Test name	Executions per second
DocumentFragment	1342.2 Ops/sec
insertAdjacentHTML	1805.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares two approaches for inserting HTML content into a DOM node: using `document.createDocumentFragment()` (also known as Document Fragment) and using `insertAdjacentHTML()`. The test case consists of creating 1000 elements with a class "MyClass" and appending them to the fragment. The resulting fragment is then appended to the DOM element with id "test".

**Options Compared**

The two options being compared are:

1. **Document Fragment**: This approach creates a `document.createDocumentFragment()` object, which allows you to add multiple elements to it without increasing the DOM's complexity. When the fragment is ready, you can append it to the DOM using the `appendChild()` method.
2. **insertAdjacentHTML()**: This approach uses the `insertAdjacentHTML()` method of the DOM element, which inserts HTML content into the element at a specific position (in this case, "beforeend").

**Pros and Cons**

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

* **Document Fragment**:
	+ Pros: Can reduce DOM complexity by allowing you to add elements without increasing the number of nodes in the document. Can also improve performance when dealing with large amounts of data.
	+ Cons: May require more memory allocation, as the fragment object needs to store all the added elements. Additionally, inserting a large fragment into the DOM can be slower than using `insertAdjacentHTML()`.
* **insertAdjacentHTML()**:
	+ Pros: Insertion is fast and efficient, as it doesn't require creating a new object or appending nodes individually.
	+ Cons: May increase DOM complexity by adding multiple nodes to the same element. Can also be slower if dealing with large amounts of data.

**Library**

In this benchmark, no library is explicitly mentioned. However, it's worth noting that `insertAdjacentHTML()` was introduced in ECMAScript 2015 (ES6) as a part of the HTML5 specification.

**Special JS Feature/Syntax**

The benchmark uses ES6 syntax, specifically template literals (`\r\nfor (i = 0; i < 1000; i++) {\r\n  html += \"<div class='MyClass'></div>\";\r\n}\r\n\r\ndocument.getElementById(\"test\").insertAdjacentHTML(\"beforeend\", html);`) and the spread operator (`const fragment = document.createDocumentFragment()...`), which is also an ES6 feature.

**Other Alternatives**

If you're interested in exploring other alternatives, here are a few options:

* Using `innerHTML` instead of `insertAdjacentHTML()` or `appendChild()`.
* Creating a virtual DOM and diffing it with the actual DOM to determine the best approach for updating the page.
* Comparing performance using WebAssembly (WASM) or another just-in-time (JIT) compiler.

Keep in mind that each alternative has its own trade-offs, pros, and cons.

Related benchmarks:

DocumentFragment vs insertAdjacentHTML (version: 0)

Comparing performance of: DocumentFragment vs insertAdjacentHTML

Created: 4 years ago by: Guest

Jump to the latest result

DocumentFragment

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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