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> ` );

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 28 runs

insertAdjacentHTML

427K/s

innerHTML

217/s

Fastest: insertAdjacentHTML (1971.3x faster)

View exact numbers

✓ insertAdjacentHTML: 427,473 ops/sec
• innerHTML: 217 ops/sec

Firefox 7 runs

insertAdjacentHTML

299K/s

innerHTML

188/s

Fastest: insertAdjacentHTML (1591.3x faster)

View exact numbers

✓ insertAdjacentHTML: 299,291 ops/sec
• innerHTML: 188 ops/sec

Mobile Results:

Chrome 7 runs

insertAdjacentHTML

191K/s

innerHTML

218/s

Fastest: insertAdjacentHTML (874.5x faster)

View exact numbers

✓ insertAdjacentHTML: 190,536 ops/sec
• innerHTML: 218 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 2 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Linux

View result in a separate tab

insertAdjacentHTML

522K/s

innerHTML

213/s

View exact numbers

Test name	Executions per second
✓ insertAdjacentHTML	521,527 Ops/sec
innerHTML	213 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.

insertAdjacentHtml vs innerHTML (version: 0)

insertAdjacentHtml vs innerHTML

Comparing performance of: `innerHTML vs insertAdjacentHTML`

Created: 5 years ago by: Guest

Go to the latest result

innerHTML

insertAdjacentHTML

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 28 runs

Firefox 7 runs

Mobile Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

insertAdjacentHtml vs innerHTML (version: 0)

insertAdjacentHtml vs innerHTML

Comparing performance of: innerHTML vs insertAdjacentHTML

Created: 5 years ago by: Guest

Go to the latest result

innerHTML

insertAdjacentHTML

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 28 runs

Firefox 7 runs

Mobile Results:

Chrome 7 runs

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: `innerHTML vs insertAdjacentHTML`