Benchmark: insertAdjacentHtml vs createContextualFragment

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:

using range
const range = new Range(); const frag = range.createContextualFragment("<h1>Some header</h1>") document.getElementById("target").appendChild(frag);
using insertAdjacentHTML
document.getElementById("target").insertAdjacentHTML("afterbegin", "<h1>Some content</h1>")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
using range
using insertAdjacentHTML

Fastest: N/A

Slowest: N/A

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/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
using range	1281.2 Ops/sec
using insertAdjacentHTML	1496059.8 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 definition and test cases to understand what's being tested.

**Benchmark Definition**

The benchmark is comparing two methods for inserting HTML content into an element:

1. `insertAdjacentHtml`: This method inserts the specified HTML at a given position relative to the element. The available positions are:
	* `beforebegin` (default): inserts before the beginning of the element
	* `afterbegin`: inserts after the beginning of the element
	* `beforeend`: inserts before the end of the element
	* `afterend`: inserts after the end of the element
2. `createContextualFragment`: This method creates a new fragment containing the specified HTML and appends it to an existing range.

**Script Preparation Code**

The script preparation code creates a `<div>` element with an ID of "target", sets its innerHTML, and appends it to the document body.

**Html Preparation Code**

There is no HTML preparation code provided, so the test will likely use the default HTML provided in the Script Preparation Code.

**Individual Test Cases**

The two test cases are:

1. **"using range"`**: This test case uses the `createContextualFragment` method to create a new fragment containing an `<h1>` element with the text "Some header". The resulting fragment is then appended to an existing range (not explicitly defined in this example).
2. **"using insertAdjacentHTML"`**: This test case uses the `insertAdjacentHtml` method to insert an `<h1>` element with the text "Some content" after the beginning of the target element.

**Options Compared**

The two methods being compared are:

* Using `createContextualFragment`
* Using `insertAdjacentHtml`

**Pros and Cons**

Here's a brief overview of the pros and cons of each approach:

### `createContextualFragment`

Pros:

* Can be more efficient for inserting large amounts of content, as it avoids the overhead of creating multiple DOM nodes.
* Allows for more fine-grained control over the insertion position.

Cons:

* Requires creating a new range object, which can add overhead.
* May not be as performant on older browsers or those with limited JavaScript engine capabilities.

### `insertAdjacentHtml`

Pros:

* Widely supported across modern browsers.
* Simple and straightforward to use.
* Does not require creating a new range object.

Cons:

* Can be less efficient for inserting large amounts of content, due to the overhead of creating multiple DOM nodes.
* May not provide as much fine-grained control over the insertion position.

**Libraries Used**

None are explicitly mentioned in this benchmark definition.

**Special JS Features or Syntax**

This benchmark does not use any special JavaScript features or syntax. It only uses standard JavaScript constructs and methods.

**Other Alternatives**

If you're looking for alternative methods to insert HTML content into an element, some other options include:

* Using `innerHTML` (although this is generally considered less efficient than the two methods being compared in this benchmark).
* Using a library like jQuery's `append()` method.
* Using a template engine like Mustache or Handlebars.

Keep in mind that the best approach will depend on your specific use case and requirements.

Related benchmarks:

insertAdjacentHtml vs createContextualFragment (version: 0)

insertAdjacentHtml vs innerHTML

Comparing performance of: using range vs using insertAdjacentHTML

Created: one year ago by: Guest

Jump to the latest result

using range

using insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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