Benchmark: insertAdjacentHTML VS append VS appendChild (createDocumentFragment) [MINIMAL]

HTML Preparation code:

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

Tests:

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The provided JSON represents three test cases, each comparing different approaches to append or insert HTML content into a web page:

1. **append**: This test case compares the performance of directly appending an element to the `body` element using `DOM.append()`.
2. **insertAdjacentHTML**: This test case compares the performance of inserting HTML content at a specific position in the DOM tree using `DOM.insertAdjacentHTML()` with the `beforeend` argument.
3. **appendChild (createDocumentFragment)**: This test case compares the performance of appending an element to a `createDocumentFragment()` object and then appending that fragment to the `body` element.

Now, let's discuss the pros and cons of each approach:

* **append**: This method is simple and straightforward but can be less efficient than other methods due to its direct manipulation of the DOM tree. On the plus side, it doesn't require any extra memory allocation or object creation.
* **insertAdjacentHTML**: This method is more efficient than directly appending an element because it uses a caching mechanism that reduces the number of DOM mutations. However, it does require some extra overhead due to the additional function call and string manipulation. Additionally, it's a bit slower on older browsers.
* **appendChild (createDocumentFragment)**: This method is often considered the most efficient way to append elements to the DOM tree because it minimizes the number of DOM mutations. The `createDocumentFragment()` object allows you to batch together multiple DOM operations and then apply them all at once, reducing the overall number of DOM updates.

Pros:

* Minimizes DOM mutations
* Can be faster due to caching

Cons:

* Requires extra memory allocation for the fragment object
* May have slower startup times due to the creation of the fragment object

Other considerations:

* **DOM traversal**: The `insertAdjacentHTML` method uses a more efficient algorithm to traverse the DOM tree, which can result in better performance on large documents.
* **Browser cache**: Modern browsers often cache frequently accessed functions and methods, including `insertAdjacentHTML`. This can reduce the overhead of repeated calls to this function.

In terms of special JS features or syntax, there aren't any explicitly mentioned. However, it's worth noting that the use of `createDocumentFragment()` requires a good understanding of how DOM fragments work and when they should be used.

The benchmark results show that:

* **append** is the slowest method, likely due to its direct manipulation of the DOM tree.
* **insertAdjacentHTML** is faster than **append**, but slower than **appendChild (createDocumentFragment)**.
* The performance differences between these methods are relatively small, and the exact ranking may depend on the specific use case and browser being used.

Other alternatives that could be considered for similar benchmarking include:

* Using `DOM.insertAdjacentElement()` instead of `insertAdjacentHTML`
* Comparing the performance of different DOM mutation methods (e.g., `DOM.appendChild()`, `DOM.removeChild()`)
* Adding more complex test cases, such as appending multiple elements or using animations to simulate real-world scenarios.

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	1474.4 Ops/sec
insertAdjacentHTML	291.2 Ops/sec
appendChild (createDocumentFragment)	1008.1 Ops/sec

Related benchmarks:

insertAdjacentHTML VS append VS appendChild (createDocumentFragment) [MINIMAL] (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 25 days ago):