Benchmark: insertAdjacentHTML VS append VS appendChild (createDocumentFragment) [div only]

HTML Preparation code:

<div></div>

Tests:

append
let newElement = document.createElement("div"); let newElementPart = {}; for (i = 0; i < 1000; i++) { newElementPart = document.createElement("div"); newElement.append(newElementPart); } document.body.append(newElement);
insertAdjacentHTML
let html = "<div>"; for (i = 0; i < 1000; i++) { html += "<div></div>"; } html += "</div>"; document.body.insertAdjacentHTML("beforeend", html);
appendChild (createDocumentFragment)
let fragment_VDOM = document.createDocumentFragment(); let newElement = document.createElement("div"); let newElementPart = {}; for (i = 0; i < 1000; i++) { newElementPart = document.createElement("div"); newElement.appendChild(newElementPart); } fragment_VDOM.appendChild(newElement); document.body.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

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; SAMSUNG SM-S908B) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/18.0 Chrome/99.0.4844.88 Mobile Safari/537.36

Browser/OS: Chrome Mobile 99 on Android

View result in a separate tab

Test name	Executions per second
append	439.0 Ops/sec
insertAdjacentHTML	765.9 Ops/sec
appendChild (createDocumentFragment)	450.7 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The test is comparing three different approaches to append elements to the DOM:

1. `insertAdjacentHTML` method
2. `appendChild` method with a `createDocumentFragment`
3. `appendChild` method without using a fragment

**What is being compared?**

Each benchmark test case measures the execution time and number of executions per second for each approach.

* For `append`, it creates an element, appends child elements to it, and then appends the entire element to the DOM.
* For `insertAdjacentHTML`, it creates a string containing HTML content, appends new HTML fragments to the end of the string, and finally inserts the resulting HTML into the DOM using `insertAdjacentHTML`.
* For `appendChild (createDocumentFragment)`, it creates a fragment, adds elements to the fragment, appends the fragment to the DOM, and then appends the original element to the DOM.

**Options compared:**

1. **`insertAdjacentHTML`**: A modern method introduced in HTML5 that allows inserting HTML content into an element without the need for additional DOM manipulation.
2. **`appendChild` with `createDocumentFragment`**: A more traditional approach that uses a fragment to group elements together, which can improve performance by avoiding unnecessary DOM recalculation.
3. **`appendChild` without using a fragment**: The most basic approach of simply appending an element directly to the DOM.

**Pros and Cons:**

1. **`insertAdjacentHTML`**:
	* Pros: Easy to use, efficient, and compatible with modern browsers.
	* Cons: May not be as performant for very large amounts of HTML content, and may require additional parsing and processing by some browsers.
2. **`appendChild (createDocumentFragment)`**:
	* Pros: Can improve performance by avoiding DOM recalculation, especially for complex or deeply nested elements.
	* Cons: Requires more manual setup and management of the fragment, which can add complexity to the codebase.
3. **`appendChild` without using a fragment**:
	* Pros: Simplest approach, with minimal overhead.
	* Cons: May lead to slower performance due to DOM recalculation, especially for large or complex elements.

**Library used in benchmarks**

In this benchmark, no specific library is mentioned, but `document.createDocumentFragment()` is used in one of the test cases. The fragment API was introduced in HTML5 and is a part of the W3C specification.

**Special JS feature or syntax**

There is no special JavaScript feature or syntax used in these benchmarks, just standard DOM manipulation techniques.

**Other alternatives**

Some other approaches to append elements to the DOM include:

1. Using `DOMParser` to parse the HTML string and then appending it to the DOM.
2. Using a library like jQuery to handle DOM manipulation, which can provide additional performance optimizations and features.
3. Using a virtual DOM library like React or Vue.js to manage the DOM, which can improve performance by reducing unnecessary DOM updates.

However, these alternatives are not mentioned in the provided benchmark definition and test cases.

Related benchmarks:

insertAdjacentHTML VS append VS appendChild (createDocumentFragment) [div only] (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 2 months ago):