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 year 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

5) documentFragment

15.9M/s

1) innerHTML +=

5.0M/s

3) appendChild

2.4M/s

4) insertAdjacentElement

2.2M/s

2) insertAdjacentHTML

2.1M/s

View exact numbers

Test name	Executions per second
✓ 5) documentFragment	15,946,960 Ops/sec
1) innerHTML +=	5,015,942 Ops/sec
3) appendChild	2,437,497 Ops/sec
4) insertAdjacentElement	2,204,402 Ops/sec
2) insertAdjacentHTML	2,140,664 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 3 years ago by: Registered User

Go to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

5) documentFragment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 3 years ago by: Registered User

Go to the latest result

1) innerHTML +=

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

5) documentFragment

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: `1) innerHTML += vs 2) insertAdjacentHTML vs 3) appendChild vs 4) insertAdjacentElement vs 5) documentFragment`