Benchmark: insertAdjacentHtml vs innerHTML

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> `;
insertAdjacentHTML
document.getElementById( 'target' ).insertAdjacentHTML( 'beforeend', ` <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	352.1 Ops/sec
insertAdjacentHTML	877773.5 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 tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark measures the performance difference between two HTML manipulation methods:

1. `insertAdjacentHTML`: A method that inserts HTML into an element using the `insertAdjacentHTML()` method.
2. `innerHTML`: A method that sets or gets the HTML content of an element's innerHTML property.

**Script Preparation Code**

The script preparation code creates a new `<div>` element, appends it to the document body, and sets its innerHTML with some sample HTML content:
```javascript
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);
```
**Html Preparation Code**

The html preparation code is empty, which means that the benchmark focuses on the JavaScript execution time, without considering any additional HTML parsing or compilation overhead.

**Individual Test Cases**

There are two test cases:

1. **innerHTML**: The first test case measures the performance of appending HTML to an element's innerHTML using `innerHTML +=`.
2. **insertAdjacentHTML**: The second test case measures the performance of inserting HTML into an element using `insertAdjacentHTML()` with the `'beforeend'` flag.

**Options Compared**

The two options being compared are:

1. **innerHTML**: A method that sets or gets the HTML content of an element's innerHTML property.
2. **insertAdjacentHTML**: A method that inserts HTML into an element using the `insertAdjacentHTML()` method.

**Pros and Cons**

Here are some pros and cons for each option:

**innerHTML**

Pros:

* Easy to use: Simply set or get the HTML content of an element's innerHTML property.
* Familiar API: Many developers are familiar with this API, which can make it easier to write code that works across browsers.

Cons:

* Potential security risks: Manipulating an element's innerHTML can lead to security vulnerabilities if not done carefully (e.g., injecting malicious HTML).
* Performance overhead: In some cases, parsing and compiling the new HTML content can introduce performance overhead.

**insertAdjacentHTML**

Pros:

* Efficient: `insertAdjacentHTML()` is designed to insert HTML into an element efficiently, without the need for parsing or compiling the new content.
* Security-friendly: This method provides better security guarantees than `innerHTML`, as it allows you to specify a fragment of the DOM tree where the new content will be inserted.

Cons:

* Less familiar API: The `insertAdjacentHTML()` method is less widely supported and understood than `innerHTML`.
* Browser quirks: Some browsers may have quirks or limitations when using this method (e.g., some versions of Chrome).

**Other Considerations**

When choosing between these two options, consider the specific use case:

* If you need to set or get a large amount of HTML content, and security is a concern, `insertAdjacentHTML()` might be a better choice.
* If you're working with small amounts of HTML content and are comfortable with the potential performance overhead, `innerHTML` might be sufficient.

Keep in mind that both methods have their trade-offs, and the benchmark results will help determine which one is faster in your specific use case.

Related benchmarks:

insertAdjacentHtml vs innerHTML (version: 0)

insertAdjacentHtml vs innerHTML

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

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