Benchmark: append vs appendChild vs insertAdjacentHTML vs DOMParser vs createContextualFragment vs append documentFragment

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.firstChild);
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));
append documentFragment
var newElement = document.createElement("div"); newElement.id = "testing" var docFrag = document.createDocumentFragment(); for (i = 0; i < 1000; i++) { var newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); docFrag.append(newElementPart); } newElement.append(docFrag); document.getElementById("test").append(newElement);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append
appendChild
insertAdjacentHTML
DOMParser
createContextualFragment
append documentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 99 on Windows

View result in a separate tab

Test name	Executions per second
append	767.2 Ops/sec
appendChild	748.5 Ops/sec
insertAdjacentHTML	1061.8 Ops/sec
DOMParser	869.9 Ops/sec
createContextualFragment	835.6 Ops/sec
append documentFragment	514.7 Ops/sec

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

LLMs can make mistakes. Check important info.

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

The provided JSON represents a JavaScript microbenchmarking test, specifically comparing six different methods for appending or inserting HTML content into a DOM element:

1. `append`
2. `appendChild`
3. `insertAdjacentHTML`
4. `DOMParser`
5. `createContextualFragment`
6. `append documentFragment`

The benchmark tests the performance of each method by creating a large number of HTML elements and appending them to the specified DOM element.

**Options compared:**

* Each test case compares two methods:
	+ The first method is the traditional way of using the `append` or `appendChild` methods on the DOM element.
	+ The second method is one of the alternative approaches (listed above).
* The alternative methods are used to create a new HTML fragment, which is then appended to the DOM element.

**Pros and Cons:**

1. **Traditional `append`/`appendChild` methods**:
	* Pros: Simple, widely supported, and well-established.
	* Cons: Can be slow for large numbers of elements due to DOM tree manipulation.
2. **Alternative methods**:
	+ `insertAdjacentHTML`: Fast and efficient, as it avoids DOM tree manipulation.
	* Pros: Faster than traditional methods, especially for large datasets.
	* Cons: May not work well with older browsers or broken HTML parsers.
	+ `DOMParser` and `createContextualFragment`:
		- Pros: Can be faster than traditional methods by avoiding DOM tree manipulation.
		- Cons: May require additional JavaScript parsing and processing, which can introduce overhead.
	+ `append documentFragment`: Similar to `insertAdjacentHTML`, but uses a document fragment as an intermediate step.

**Libraries used:**

* None explicitly mentioned in the provided JSON. However, it's worth noting that some of these methods rely on modern browser features or libraries like jQuery (for `$()`).

**Special JS features or syntax:**

None are explicitly mentioned in the provided code snippets.

**Other alternatives:**

Other possible alternatives for appending HTML content to a DOM element could include:

* Using a library like jQuery (which provides its own `append` method) or a similar alternative.
* Leveraging modern browser features, such as the `innerHTML` property or Web Workers.
* Implementing custom rendering mechanisms using SVG or Canvas.

It's essential to consider factors like browser support, performance overhead, and code maintainability when choosing an approach for appending HTML content in your own projects.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

append

appendChild

insertAdjacentHTML

DOMParser

createContextualFragment

append documentFragment

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