Benchmark: append vs appendChild vs insertAdjacentHTML vs DOMParser vs createContextualFragment

HTML Preparation code:

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

Tests:

append
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").append(newElement);
appendChild
var newElement = document.createElement("div"); newElement.id = "testing" for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.appendChild(newElementPart); } document.getElementById("test").appendChild(newElement);
insertAdjacentHTML
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").insertAdjacentHTML("beforeend", html);
DOMParser
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").append((new DOMParser()).parseFromString(html, "text/html").body.childNodes);
createContextualFragment
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").append(document.createRange().createContextualFragment(html));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
appendChild
insertAdjacentHTML
DOMParser
createContextualFragment

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
append	730.7 Ops/sec
appendChild	875.3 Ops/sec
insertAdjacentHTML	2205.4 Ops/sec
DOMParser	1542.6 Ops/sec
createContextualFragment	834.0 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 benchmark and its various test cases.

**Benchmark Overview**

The benchmark measures the performance of four different DOM manipulation methods: `append`, `appendChild`, `insertAdjacentHTML`, `DOMParser`, and `createContextualFragment`. These methods are used to add HTML elements or fragments to a document. The benchmark is designed to test which method is the fastest for adding a large number of elements.

**Library and Features**

1. `DOMParser`: This library parses an HTML string into a DOM document, allowing you to manipulate its contents. In this benchmark, it's used to parse an HTML string created by concatenating 1000 "div" elements with a class of "testClass".
2. `createContextualFragment`: This feature creates a new Document Fragment that contains a subset of the original document. It allows for efficient insertion of content into the DOM without creating new elements. In this benchmark, it's used to create a new fragment containing 1000 "div" elements with a class of "testClass".
3. `insertAdjacentHTML`: This method inserts an HTML string at a specified location within the document, allowing for efficient addition of content. In this benchmark, it's used to insert a large HTML string into the document.
4. The other methods (`append`, `appendChild`) are native DOM methods that add elements to the end or children of an existing element.

**Test Cases**

1. **Append**: Adds 1000 "div" elements with a class of "testClass" to the end of a parent element using the `append` method.
2. **AppendChild**: Adds 1000 "div" elements with a class of "testClass" to the children of a parent element using the `appendChild` method.
3. **InsertAdjacentHTML**: Inserts a large HTML string containing 1000 "div" elements with a class of "testClass" into the document using `insertAdjacentHTML`.
4. **DOMParser**: Parses an HTML string created by concatenating 1000 "div" elements with a class of "testClass" and appends it to a parent element.
5. **createContextualFragment**: Creates a new Document Fragment containing 1000 "div" elements with a class of "testClass" and appends it to a parent element.

**Pros and Cons**

1. `append` and `appendChild`: These methods are simple and lightweight, but may have slower performance due to the need for multiple DOM operations.
2. `insertAdjacentHTML`: This method is efficient for inserting large amounts of content at a specific location within the document.
3. `DOMParser`: This method can be slower than other approaches since it involves parsing an HTML string into a DOM document, which may not be necessary for this benchmark.
4. `createContextualFragment`: This feature provides an efficient way to add content to the DOM without creating new elements, but its performance benefits may vary depending on the specific use case.

**Other Alternatives**

1. **String Concatenation**: Instead of using a loop to concatenate HTML strings, you could use string concatenation (e.g., `html += '<div class="testClass"></div>'`) for simplicity.
2. **Element Template**: You could use an element template (e.g., `<template id="myTemplate">...</template>`) to avoid creating and appending individual elements in a loop.

Keep in mind that the performance results of this benchmark may vary depending on the specific browser, hardware, and version being tested.

Related benchmarks:

append vs appendChild vs insertAdjacentHTML vs DOMParser vs createContextualFragment (version: 0)

Comparing performance of: append vs appendChild vs insertAdjacentHTML vs DOMParser vs createContextualFragment

Created: 4 years ago by: Guest

Jump to the latest result

append

appendChild

insertAdjacentHTML

DOMParser

createContextualFragment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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