Benchmark: insertAdjacentHTML vs append cloneNode

HTML Preparation code:

<form id='test'></form>

Tests:

append cloneNode
const htmlStrg = `<fieldset class='grid-container'><div class='cell'><input type='date' name='date' class='input input-date'></div></fieldset>` const parsedHTML = new DOMParser().parseFromString(htmlStrg, 'text/html').body.firstChild const form = document.getElementById('test') for (let i = 0; i < 200; i++) { form.appendChild(parsedHTML.cloneNode(true)) }
insertAdjacentHTML
const htmlStrg = `<fieldset class='grid-container'><div class='cell'><input type='date' name='date' class='input input-date'></div></fieldset>` const form = document.getElementById('test') for (let i = 0; i < 200; i++) { form.insertAdjacentHTML('beforeend', htmlStrg) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append cloneNode
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/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
append cloneNode	6.0 Ops/sec
insertAdjacentHTML	1.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the provided benchmark.

**What is tested:**

The benchmark tests two different ways of inserting HTML content into a `form` element in JavaScript:

1. **append cloneNode**: This method creates a copy of an existing HTML element (in this case, a `fieldset` element) and appends it to another element (`form`). The cloned element is then appended multiple times (200 times) to the form.
2. **insertAdjacentHTML**: This method inserts a string containing HTML content directly into the specified position within an element. In this benchmark, the string is inserted before the end of the `form` element.

**Options compared:**

The two methods are compared in terms of their performance:

* **append cloneNode**: Creates a copy of the original HTML element and appends it to the form.
	+ Pros:
		- More explicit control over the cloned element's properties.
	+ Cons:
		- Creates multiple DOM elements, which can lead to increased memory usage and slower performance due to DOM manipulation.
* **insertAdjacentHTML**: Inserts a string containing HTML content directly into the specified position within an element.
	+ Pros:
		- More efficient than creating multiple DOM elements.
	+ Cons:
		- Less control over the inserted element's properties.

**Other considerations:**

When choosing between these methods, consider the following factors:

* **Memory usage**: If memory usage is a concern, `insertAdjacentHTML` might be a better choice since it avoids creating multiple DOM elements.
* **Performance**: If performance is critical, `append cloneNode` might be faster for smaller numbers of cloned elements. However, as the number of cloned elements increases, `insertAdjacentHTML` may become more efficient.
* **Control and flexibility**: If you need fine-grained control over the properties of the cloned element, `append cloneNode` is a better choice.

**Library usage:**

There is no library explicitly mentioned in the benchmark definition. However, the use of `DOMParser` suggests that JavaScript's built-in DOM APIs are being utilized to parse and manipulate HTML content.

**Special JS feature or syntax:**

There are no special JavaScript features or syntaxes used in this benchmark. The focus is on comparing the performance of two fundamental methods for inserting HTML content into a form element.

**Alternatives:**

If you're considering alternative approaches, here are a few:

* **innerHTML**: Similar to `insertAdjacentHTML`, but with less control over the inserted element's properties.
* **outerHTML**: Inserts the entire HTML content as a string, without parsing it as DOM nodes.
* **textContent**: Similar to `innerHTML`, but only for text content; not suitable for inserting HTML elements.

Keep in mind that each of these alternatives has its own trade-offs and performance characteristics.

Related benchmarks:

insertAdjacentHTML vs append cloneNode (version: 0)

Comparing performance of: append cloneNode vs insertAdjacentHTML

Created: 4 years ago by: Guest

Jump to the latest result

append cloneNode

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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