Benchmark: insertAdjacentHtml with remove 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 with remove
const t = document.getElementById( 'target' ); const l = t.children.length; for (let i = 0; i < l; i++) { t.children[i].remove(); } t.insertAdjacentHTML( 'afterbegin', ` <div> <span>Child 4</span> </div> ` );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
insertAdjacentHTML with remove

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 13; Mobile; rv:128.0) Gecko/128.0 Firefox/128.0

Browser/OS: Firefox Mobile 128 on Android

View result in a separate tab

Test name	Executions per second
innerHTML	56391.5 Ops/sec
insertAdjacentHTML with remove	710.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 and explain what's being tested.

**Benchmark Definition**

The benchmark is testing two different approaches to inserting HTML content into a DOM element:

1. `innerHTML`:
	* The script preparation code creates a new `<div>` element with child elements, which is then appended to the document body.
	* The test case updates the `innerHTML` property of an element with the ID "target" to add a new child element.
2. `insertAdjacentHTML` with `remove`:
	* Similar to the first approach, but this time, it uses `insertAdjacentHTML` instead of updating the `innerHTML` directly.
	* The test case also removes all child elements from the target element before inserting the new HTML content.

**Options being compared**

The benchmark is comparing two approaches:

1. Directly setting the `innerHTML` property of an element to insert new content.
2. Using the `insertAdjacentHTML` method with a `remove` attribute to clear and then re-insert content.

**Pros and Cons**

Here are some pros and cons of each approach:

**Direct `innerHTML`**

Pros:

* Simple and straightforward way to insert content
* Less overhead compared to using `insertAdjacentHTML`

Cons:

* Can lead to performance issues if the element is large or contains many child elements.
* May not be suitable for dynamic content updates, as it can cause unnecessary DOM mutations.

**`insertAdjacentHTML` with `remove`**

Pros:

* Allows for more control over when and how content is inserted (e.g., using the `afterbegin` attribute).
* Can help reduce performance issues by avoiding unnecessary DOM mutations.

Cons:

* Requires an additional method call (`insertAdjacentHTML`) which can introduce overhead.
* May require more complex code to manage the removal of child elements before insertion.

**Library usage**

There is no explicit library mentioned in the benchmark definition or test cases. However, it's worth noting that `insertAdjacentHTML` was introduced in HTML5 as a way to insert content at specific positions in the DOM tree.

**Special JavaScript features/syntax**

There are no special JavaScript features or syntax mentioned in this benchmark.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. Using `createElement()` and then setting its `innerHTML` property (as shown in the script preparation code).
2. Using `textContent` instead of `innerHTML` for inserting content.
3. Using a library like jQuery to simplify DOM manipulation.

Keep in mind that these alternatives might have different performance characteristics or require more complex code to manage.

I hope this explanation helps you understand what's being tested in this benchmark!

Related benchmarks:

insertAdjacentHtml with remove vs innerHTML (version: 0)

insertAdjacentHtml with remove vs innerHTML

Comparing performance of: innerHTML vs insertAdjacentHTML with remove

Created: one year ago by: Guest

Jump to the latest result

innerHTML

insertAdjacentHTML with remove

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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