Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement vs documentFragment

Script Preparation code:

 box1 = document.createElement("div");

 box2 = document.createElement("div");
 fragment = document.createDocumentFragment();
 box2HTML = box2.innerHTML;

Tests:

1) innerHTML +=
box1.innerHTML += box2HTML;
2) insertAdjacentHTML
box1.insertAdjacentHTML('beforeend', box2HTML);
3) appendChild
box1.appendChild(box2);
4) insertAdjacentElement
box1.insertAdjacentElement('beforeend', box2);
5) documentFragment
box1.appendChild(fragment);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1) innerHTML +=
2) insertAdjacentHTML
3) appendChild
4) insertAdjacentElement
5) documentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
1) innerHTML +=	5015941.5 Ops/sec
2) insertAdjacentHTML	2140664.5 Ops/sec
3) appendChild	2437496.8 Ops/sec
4) insertAdjacentElement	2204402.5 Ops/sec
5) documentFragment	15946960.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares the performance of different approaches to append or insert HTML content into an existing DOM element.

**Tested Options**

The following options are compared:

1. `innerHTML +=`
2. `insertAdjacentHTML('beforeend', ...)`
3. `appendChild(...)`
4. `insertAdjacentElement('beforeend', ...)`
5. Using a `documentFragment` object

Each option is tested on its own, and the benchmark measures the number of executions per second for each option.

**Pros and Cons**

Here's a brief analysis of the pros and cons of each approach:

1. **innerHTML +=**: This method can lead to inefficient DOM manipulation, as it involves creating a new string with the combined content and then parsing it into the DOM.
	* Pros: Simple and easy to implement.
	* Cons: Can be slow and inefficient for large amounts of content.
2. **insertAdjacentHTML('beforeend', ...)**: This method is more efficient than `innerHTML +=`, as it avoids creating a new string with the combined content. However, it requires creating a new HTML element and appending it to the DOM.
	* Pros: More efficient than `innerHTML +=`.
	* Cons: Requires creating a new HTML element and appending it to the DOM, which can be slower for large amounts of content.
3. **appendChild(...)**: This method involves removing the existing content from the DOM before adding new content, which can lead to unnecessary DOM mutations.
	* Pros: Can be efficient if the existing content is not needed.
	* Cons: Can lead to inefficient DOM manipulation and unnecessary DOM mutations.
4. **insertAdjacentElement('beforeend', ...)**: This method is similar to `insertAdjacentHTML`, but it uses an existing element instead of creating a new one. This can be more efficient than `appendChild`.
	* Pros: More efficient than `appendChild` if the existing element is not needed.
	* Cons: Requires using an existing element, which may not always be available.
5. **documentFragment**: Using a `documentFragment` object allows for appending multiple elements without causing unnecessary DOM mutations.
	* Pros: Can reduce the number of DOM mutations and improve performance.
	* Cons: Requires more memory and can be slower due to the overhead of creating a fragment.

**Library Usage**

The benchmark uses the following libraries:

None, as all tests are standalone JavaScript code.

**Special JS Features or Syntax**

This benchmark does not use any special JavaScript features or syntax. It only focuses on the basic DOM manipulation APIs provided by the browser.

**Other Alternatives**

If you need to perform similar benchmarking exercises, you can consider using other benchmarking tools and frameworks, such as:

* Benchmark.js
* jsPerf
* Benchmarkr

Keep in mind that each tool has its own strengths and weaknesses, and some may be more suitable for your specific use case.

Related benchmarks:

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement vs documentFragment (version: 0)

Comparing performance of: 1) innerHTML += vs 2) insertAdjacentHTML vs 3) appendChild vs 4) insertAdjacentElement vs 5) documentFragment

Created: 2 years ago by: Registered User

Jump to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

5) documentFragment

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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