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

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.5845.2249 YaBrowser/23.9.0.2249 Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 23 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	578647.5 Ops/sec
replaceChildren + insertAdjacentHTML	553772.7 Ops/sec

Related benchmarks:

innerHTML vs replaceChildren + insertAdjacentHTML (version: 0)

Comparing performance of: innerHTML vs replaceChildren + insertAdjacentHTML

Created: one year ago by: Guest

Jump to the latest result

innerHTML

replaceChildren + insertAdjacentHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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