Benchmark: innerHTML vs insertAdjacentHTML

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));

Tests:

innerHTML
var node = document.getElementById('container'); var template = ` <div class="movie"> <h2>영화</h2> <p>여기는 영화 입니다.</p> </div> ` node.innerHTML = template
insertAdjacentHTML
var node = document.getElementById('container'); var template = ` <div class="movie"> <h2>영화</h2> <p>여기는 영화 입니다.</p> </div> ` while(node.firstChild) node.removeChild(node.firstChild) node.insertAdjacentHTML('beforeend', template)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what's being tested.

**What is being tested?**

The website MeasureThat.net is testing the performance difference between two methods: `innerHTML` and `insertAdjacentHTML`. The test creates a JavaScript microbenchmark to compare these two approaches in terms of execution speed.

**Options compared:**

1. **innerHTML**: This method sets the HTML content of an element using its innerHTML property.
2. **insertAdjacentHTML**: This method inserts HTML content into an element at a specific position (before or after other elements) without modifying the existing DOM structure.

**Pros and Cons of each approach:**

1. `innerHTML`:
	* Pros:
		+ Easy to use and understand
		+ Works well for small amounts of data
	* Cons:
		+ Can be slower due to the need to parse and update the entire HTML content
		+ May lead to more DOM mutations, which can impact performance
2. `insertAdjacentHTML`:
	* Pros:
		+ More efficient than `innerHTML` for large amounts of data
		+ Allows for better control over the insertion point and flexibility in updating the DOM structure
	* Cons:
		+ Requires a deeper understanding of the DOM API and its methods
		+ May have additional overhead due to the need to update the DOM structure

**Library and purpose:**

In the test case, the `insertAdjacentHTML` method uses the `template` string feature (introduced in ECMAScript 2015) to define a template with placeholders for data. The `while` loop removes the first child element from the node before inserting the new HTML content.

**Other considerations:**

* **DOM updates**: Both methods update the DOM, but `insertAdjacentHTML` allows for more fine-grained control over the insertion point and the ability to add or remove elements without affecting the entire structure.
* **Template literals**: The use of template literals (e.g., `\r\n  <div class="movie">\r\n    <h2>영화</h2>\r\n    <p>여기는 영화 입니다.</p>  \r\n  </div>\r\n`) provides a concise way to define HTML content with placeholders for data.
* **Browser differences**: The benchmark results show different execution speeds between `innerHTML` and `insertAdjacentHTML` across different browsers (Chrome 98). This highlights the importance of considering browser-specific optimizations and nuances when choosing an approach.

**Alternatives:**

Other alternatives for inserting or updating HTML content include:

1. `appendChild`: Adding elements to a container using the `appendChild` method.
2. `createElement` and `innerHTML`: Creating elements programmatically and then setting their innerHTML property.
3. DOM mutations (e.g., `DOMSubtreeModificationException`): Using native DOM methods like `insertBefore` or `removeChild` for more complex updates.

These alternatives may offer different trade-offs in terms of performance, code complexity, and readability, and should be considered on a case-by-case basis.

Related benchmarks:

innerHTML vs insertAdjacentHTML (version: 0)

innerHTML vs insertAdjacentHTML

Comparing performance of: innerHTML vs insertAdjacentHTML

Created: 5 years ago by: Guest

Jump to the latest result

innerHTML

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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