Benchmark: innerHTML vs replaceChildren + insertAdjacentHTML

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> `;
replaceChildren + insertAdjacentHTML
const target = document.getElementById('target') target.replaceChildren(); 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
replaceChildren + insertAdjacentHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 133 on Android

View result in a separate tab

Test name	Executions per second
innerHTML	28640.8 Ops/sec
replaceChildren + insertAdjacentHTML	21128.2 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.

**Benchmark Definition JSON**

The benchmark measures the performance of two approaches to update the content of an HTML element:

1. `innerHTML`: Using the `innerHTML` property to set the new content directly on the DOM element.
2. `replaceChildren + insertAdjacentHTML`: Replacing the existing children of the element with a new HTML fragment using `replaceChildren()` and then inserting additional content using `insertAdjacentHTML()`.

**Options Compared**

The two options are compared in terms of their performance impact on the browser's execution speed.

**Pros and Cons of Each Approach:**

1. **`innerHTML`**
	* Pros:
		+ Simple and straightforward.
	+ Minimal overhead, as it only involves setting a new value on the DOM element.
	* Cons:
		+ Can be slower due to the following reasons:
			- DOM updates are typically batched and may not be immediately reflected in the rendering engine.
			- The browser needs to parse and validate the new HTML content, which can lead to additional overhead.
2. **`replaceChildren + insertAdjacentHTML`**
	* Pros:
		+ Can be faster due to the following reasons:
			- Replacing children is typically more efficient than updating individual properties of an element.
			- Inserting adjacent HTML using `insertAdjacentHTML()` can be optimized by the browser, as it allows for incremental updates rather than full page reflows.
	* Cons:
		+ More complex and may require additional setup or manual management of child nodes.

**Library/Functionality Used**

None are explicitly mentioned in the benchmark definition JSON. However, the `replaceChildren()` function is a built-in method of HTML elements in JavaScript, while `insertAdjacentHTML()` is also part of the DOM API.

**Special JS Feature/Syntax (if applicable)**

There is no special JS feature or syntax used in this benchmark. The code uses standard JavaScript features and APIs.

**Alternatives**

Other approaches to update the content of an HTML element could include:

1. `appendChild()`: Creating a new child node and appending it to the existing children.
2. Using a template engine or string interpolation library (e.g., Handlebars, Mustache) to generate the new content.
3. Utilizing browser-specific APIs, such as WebAssembly or WebGPU, for more efficient rendering.

Keep in mind that these alternatives may introduce additional complexity or overhead, and their performance characteristics would need to be evaluated separately.

Related benchmarks:

innerHTML vs replaceChildren + insertAdjacentHTML (version: 0)

Comparing performance of: innerHTML vs replaceChildren + insertAdjacentHTML

Created: 2 years ago by: Guest

Jump to the latest result

innerHTML

replaceChildren + insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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