Benchmark: insertAdjacentHTML VS append VS appendChild (createDocumentFragment)

HTML Preparation code:

<div id="test"></div>

Tests:

append
let newElement = document.createElement("div"); newElement.id = "testing" let newElementPart = {}; for (i = 0; i < 1000; i++) { newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").append(newElement);
insertAdjacentHTML
let html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").insertAdjacentHTML("beforeend", html);
appendChild (createDocumentFragment)
let fragment_VDOM = document.createDocumentFragment(); let newElement = document.createElement("div"); let newElementPart = {}; newElement.id = "testing" for (i = 0; i < 1000; i++) { newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.appendChild(newElementPart); } fragment_VDOM.appendChild(newElement); document.getElementById("test").appendChild(fragment_VDOM);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
insertAdjacentHTML
appendChild (createDocumentFragment)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmarking setup.

**Benchmark Overview**

The benchmark compares three methods for appending or inserting content into an HTML element: `insertAdjacentHTML`, `appendChild` (without creating a fragment), and `appendChild` (with creating a document fragment). The goal is to determine which method has the best performance characteristics in terms of execution speed.

**Options Compared**

1. **insertAdjacentHTML**: This method inserts the provided HTML into the specified position within an element.
2. **appendChild**: Without using a fragment, this method appends a DOM node (in this case, an empty `div`) to the end of its parent element.
3. **appendChild** (with creating a document fragment): Similar to the previous option, but instead of appending an empty `div` directly, it appends the entire fragment (containing multiple elements) at once.

**Pros and Cons**

1. **insertAdjacentHTML**: Pros:
	* Can be more efficient, as it avoids unnecessary DOM node creation and manipulation.
	* Provides a convenient way to insert HTML fragments into existing content.
2. **appendChild** (without fragment):
	* Pros: Simple and straightforward implementation.
	* Cons:
		+ Creates multiple empty `div` nodes, which can lead to increased memory usage and slower performance due to DOM node creation and garbage collection.
3. **appendChild** (with document fragment):
	* Pros:
		+ Reduces the number of DOM nodes created, as only a single fragment is appended at once.
		+ Can be more efficient in terms of execution speed, since all elements within the fragment are processed together.
	* Cons:
		+ Requires creating and managing an extra document fragment object.

**Library and Special JS Features**

The benchmark uses JavaScript's built-in `document` object, specifically the `Element`, `DocumentFragment`, and `createDocumentFragment()` methods. The `insertAdjacentHTML()` method is also used to specify the position where the HTML content should be inserted.

**Other Considerations**

1. **DOM Node Creation**: Creating DOM nodes can be an expensive operation in JavaScript. Benchmarking different approaches helps identify the most efficient way to append or insert content into the DOM.
2. **Memory Usage**: The number of DOM nodes created can impact memory usage, especially if the benchmark is run multiple times. Using a document fragment can help reduce this overhead.

**Alternatives**

Other methods for appending or inserting content into an HTML element include:

1. `innerHTML` and `innerText`: These properties allow you to set the inner HTML or text of an element directly. However, they are not recommended due to security concerns (e.g., XSS vulnerabilities) and potential performance issues.
2. `createElement`, `appendChild`, and then modifying the node's properties: This approach requires creating a new DOM node, appending it to the parent element, and then modifying its properties. While it provides more control over the content, it can be slower than using built-in methods like `insertAdjacentHTML` or `appendChild`.
3. Using a library or framework-specific solution (e.g., React's `React.createElement()`): These solutions often provide optimized performance characteristics for specific use cases but may add dependencies and complexity.

Keep in mind that the choice of method depends on the specific requirements of your project, such as performance, memory usage, and ease of maintenance.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) QtWebEngine/5.15.2 Chrome/83.0.4103.122 Safari/537.36 Konqueror (WebEnginePart)

Browser/OS: Chrome 83 on Linux

View result in a separate tab

Test name	Executions per second
append	383.1 Ops/sec
insertAdjacentHTML	782.9 Ops/sec
appendChild (createDocumentFragment)	449.3 Ops/sec

Related benchmarks:

insertAdjacentHTML VS append VS appendChild (createDocumentFragment) (version: 0)

Comparing performance of: append vs insertAdjacentHTML vs appendChild (createDocumentFragment)

Created: 2 years ago by: Guest

Jump to the latest result

append

insertAdjacentHTML

appendChild (createDocumentFragment)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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