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

insertAdjacentHTML

2K/s

DOMParser

2K/s

appendChild

875/s

createContextualFragment

834/s

append

731/s

View exact numbers

Test name	Executions per second
✓ insertAdjacentHTML	2,205 Ops/sec
DOMParser	1,543 Ops/sec
appendChild	875 Ops/sec
createContextualFragment	834 Ops/sec
append	731 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.

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

Go 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):

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

Go 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):

Related benchmarks

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