Benchmark: insertAdjacentHtml vs innerHTML (multiple)

Script Preparation code:

const targetElem = document.createElement( 'DIV' );
targetElem.id = 'target';

targetElem.innerHTML = `
	<div>
		<span>Child 1</span>
	</div>
	<div>
		<span>Child 2</span>
	</div>
	<div>
		<span>Child 3</span>
	</div>
`;

document.body.appendChild( targetElem );

Tests:

innerHTML
document.getElementById( 'target' ).innerHTML += ` <div> <span>Child 4</span> </div> <h3>Title</h3> <div> <span>Child 4</span> </div> `;
insertAdjacentHTML
document.getElementById( 'target' ).insertAdjacentHTML( 'beforeend', ` <div> <span>Child 4</span> </div> <h3>Title</h3> <div> <span>Child 4</span> </div> ` );

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:

Run details: (Test run date: 24 days ago)

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

Browser/OS: Chrome 146 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	77.4 Ops/sec
insertAdjacentHTML	115478.8 Ops/sec

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 and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of two JavaScript methods: `insertAdjacentHtml` and `innerHTML`. Both methods are used to append HTML content to an existing element, but they differ in how they handle the HTML string.

**Options Compared**

There are two options being compared:

1. **innerHTML**: This method sets the innerHTML of an element, which means it replaces the entire contents of the element with a new HTML string.
2. **insertAdjacentHtml**: This method inserts an HTML fragment at a specific position within an element, without replacing any existing content.

**Pros and Cons**

Here are some pros and cons of each approach:

* **innerHTML**:
	+ Pros: Simple to use, easy to understand.
	+ Cons: Can be slower than `insertAdjacentHtml` because it requires creating a new string representation of the HTML content, which can lead to more memory allocation and garbage collection.
* **insertAdjacentHtml**:
	+ Pros: More efficient than `innerHTML`, as it avoids creating a new string representation of the HTML content.
	+ Cons: Can be less straightforward to use, especially for complex HTML structures.

**Library Usage**

In this benchmark, no libraries are explicitly mentioned. However, if we look at the `Script Preparation Code` and `Html Preparation Code`, we can see that the script creates a `DIV` element with some HTML content using template literals (`\r\n\t<div>\r\n\t\t<span>Child 1</span>\r\n\t</div>\r\n...`). This is not specific to any library, but rather a standard JavaScript way of creating and formatting strings.

**Special JS Features or Syntax**

There are no special JavaScript features or syntaxes being used in this benchmark. The code is standard JavaScript, using the features and methods that are widely supported across modern browsers.

**Other Alternatives**

If you're interested in alternative approaches for inserting HTML content into an element, here are a few options:

* **DOMTraverse**: This method allows you to traverse the DOM tree and insert or append content at specific nodes. While it provides more flexibility than `insertAdjacentHtml`, it can be slower and more complex to use.
* **String.prototype.replace()**: You could use the `replace()` method on the innerHTML property of an element, but this approach is not recommended because it can lead to performance issues and security vulnerabilities.

Overall, the benchmark compares two common approaches for inserting HTML content into an element: `innerHTML` and `insertAdjacentHtml`. While both methods have their pros and cons, `insertAdjacentHtml` tends to be more efficient, making it a better choice when performance is critical.

Related benchmarks:

insertAdjacentHtml vs innerHTML (multiple) (version: 0)

insertAdjacentHtml vs innerHTML

Comparing performance of: innerHTML vs insertAdjacentHTML

Created: 3 years ago by: Guest

Jump to the latest result

innerHTML

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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