Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2

Script Preparation code:

 box1 = document.createElement("div");

 box2 = document.createElement("div");

Tests:

2) insertAdjacentHTML
box1.insertAdjacentHTML('beforeend', box2);
3) appendChild
box1.appendChild(box2);
4) insertAdjacentElement
box1.insertAdjacentElement('beforeend', box2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
2) insertAdjacentHTML
3) appendChild
4) insertAdjacentElement

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 7

View result in a separate tab

Test name	Executions per second
2) insertAdjacentHTML	211115.0 Ops/sec
3) appendChild	2458513.2 Ops/sec
4) insertAdjacentElement	2117292.5 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and results.

**Benchmark Definition:**

The benchmark is called "innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2". It compares four different methods for inserting HTML content into an existing HTML element:

1. `insertAdjacentHTML`
2. `appendChild`
3. `insertAdjacentElement`

The test case uses two HTML elements, `box1` and `box2`, which are created using the `document.createElement()` method.

**Test Cases:**

There are three individual test cases:

1. **insertAdjacentHTML**: This test case uses the `insertAdjacentHTML` method to insert the content of `box2` into `box1`.
	* Code: `box1.insertAdjacentHTML('beforeend', box2);`
	* Purpose: To measure the time it takes to insert HTML content using this method.
2. **appendChild**: This test case uses the `appendChild` method to append the content of `box2` to `box1`.
	* Code: `box1.appendChild(box2);`
	* Purpose: To measure the time it takes to append an existing HTML element to another element.
3. **insertAdjacentElement**: This test case uses the `insertAdjacentElement` method to insert the content of `box2` into `box1`, similar to `insertAdjacentHTML`.
	* Code: `box1.insertAdjacentElement('beforeend', box2);`
	* Purpose: To measure the time it takes to insert an existing HTML element using this method.

**Latest Benchmark Results:**

The results show the execution speed ( Executions Per Second) of each test case on a Chrome 118 browser running on Windows:

1. **appendChild**: 573261.4375 executions per second
2. **insertAdjacentElement**: 550334.25 executions per second
3. **insertAdjacentHTML**: 136518.90625 executions per second

**What is being tested:**

The benchmark is testing the performance of four different methods for inserting HTML content into an existing element:

* `insertAdjacentHTML`: Inserts HTML content as a string, without parsing it.
* `appendChild`: Appends an existing HTML element to another element.
* `insertAdjacentElement`: Inserts an existing HTML element into another element.

**Pros and Cons:**

The choice of method depends on the specific use case:

* **insertAdjacentHTML**:
	+ Pros: Fast execution speed, suitable for inserting large amounts of HTML content as a string.
	+ Cons: May have security implications if the inserted HTML content is not sanitized properly.
* **appendChild**:
	+ Pros: Suitable for appending existing HTML elements to another element, without modifying the DOM structure.
	+ Cons: May be slower than `insertAdjacentHTML` or `insertAdjacentElement`, depending on the complexity of the appended element.
* **insertAdjacentElement**:
	+ Pros: Suitable for inserting existing HTML elements into another element, with a syntax similar to `insertAdjacentHTML`.
	+ Cons: May have security implications if the inserted element is not properly sanitized.

**Other Considerations:**

When choosing an insertion method, consider factors like:

* Performance requirements
* Security implications of inserting untrusted HTML content
* DOM structure and layout modifications

In this benchmark, the results show that `appendChild` and `insertAdjacentElement` have similar execution speeds on Chrome 118, while `insertAdjacentHTML` is significantly slower. However, the choice of method should be based on the specific use case and requirements.

Related benchmarks:

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

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2

Comparing performance of: 2) insertAdjacentHTML vs 3) appendChild vs 4) insertAdjacentElement

Created: 2 years ago by: Guest

Jump to the latest result

2) insertAdjacentHTML

3) appendChild

4) insertAdjacentElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):