Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement add attribute x100 fix

Script Preparation code:


box1 = document.createElement("div");

box2 = document.createElement("div");
box2.src = "https://google.com";
box2.setAttribute('style', 'position:absolute;display:block;width:300px;hright:300px;border:2px solid blue');
box2.textContent = "X";

Tests:

innerHTML
for (var i=0; i<100;i++){ box1.innerHTML += box2.outerHTML; }
insertAdjacentHTML
for (var i=0; i<100;i++){ box1.insertAdjacentHTML('beforeend', box2.outerHTML); }
appendChild
for (var i=0; i<100;i++){ let El = document.createElement("div"); El.src="https://google.com"; El.setAttribute('style','position:absolute;display:block;width:300px;hright:300px;border:2px solid blue'); El.textContent = "X"; box1.appendChild(El); }
insertAdjacentElement
for (var i=0; i<100;i++){ let El = document.createElement("div"); El.src = "https://google.com"; El.setAttribute('style', 'position:absolute;display:block;width:300px;hright:300px;border:2px solid blue'); El.textContent = "X"; box1.insertAdjacentElement('beforeend', El); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
insertAdjacentHTML
appendChild
insertAdjacentElement

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Linux

View result in a separate tab

Test name	Executions per second
innerHTML	2.6 Ops/sec
insertAdjacentHTML	1672.4 Ops/sec
appendChild	2385.0 Ops/sec
insertAdjacentElement	2429.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested on MeasureThat.net.

**Benchmark Overview**

The benchmark compares the performance of four different methods for adding or inserting HTML elements into an existing element:

1. `innerHTML`
2. `insertAdjacentHTML`
3. `appendChild`
4. `insertAdjacentElement`

Each method is compared in a loop that runs 100 times, with the same input data (a `div` element with some inline styles and text content).

**Options Compared**

The four options are compared as follows:

1. **innerHTML**: sets the inner HTML of an element by assigning a new string to its `innerHTML` property.
2. **insertAdjacentHTML**: inserts a fragment of HTML into an existing element, before or after another element specified using `insertAdjacentElement`.
3. **appendChild**: adds a child element to an existing element's DOM tree.
4. **insertAdjacentElement**: similar to `insertAdjacentHTML`, but takes an individual HTML element as an argument instead of a fragment.

**Pros and Cons of Each Approach**

Here are some pros and cons of each approach:

1. **innerHTML**:
	* Pros: simple, fast, and widely supported.
	* Cons: can be slow if the inner HTML needs to be parsed or processed (e.g., when dealing with complex DOM structures).
2. **insertAdjacentHTML**:
	* Pros: more efficient than `innerHTML` for large amounts of data, as it avoids parsing and processing overhead.
	* Cons: requires a fragment of HTML (using `createTemplate`) which can be slower to create than just assigning raw HTML to `innerHTML`.
3. **appendChild**:
	* Pros: allows for direct manipulation of the DOM tree, which can be beneficial for complex structures or dynamic updates.
	* Cons: can be slower than `insertAdjacentHTML` when dealing with large amounts of data, as it requires creating a new element and adding it to the DOM tree.
4. **insertAdjacentElement**:
	* Pros: similar to `insertAdjacentHTML`, but takes an individual HTML element instead of a fragment, making it faster to create.
	* Cons: still requires creating a new element using `createElement` and inserting it into the DOM tree, which can be slower than just assigning raw HTML to `innerHTML`.

**Library Usage**

The test case uses the `createTemplate` method from Web Components (WC), which is used to create a fragment of HTML that can be inserted into an existing element. The `createTemplate` method creates a new `Template` object, which is then used to insert the HTML fragment using `insertAdjacentHTML`.

**Special JS Features/Syntax**

None mentioned in this benchmark.

**Other Alternatives**

If you need to optimize performance for adding or inserting HTML elements, consider the following alternatives:

1. **Use a template engine**: specialized engines like Handlebars, Mustache, or Nunjucks can provide better performance and features than using plain JavaScript.
2. **Optimize DOM updates**: use techniques like batch updating, patching, or using a virtual DOM to minimize unnecessary DOM mutations.
3. **Pre-render content**: pre-render HTML fragments or entire pages before rendering them in the browser, reducing the number of DOM updates needed.

Please note that these alternatives may have trade-offs and require additional setup or configuration.

The benchmark results suggest that `insertAdjacentHTML` is the fastest approach, followed by `insertAdjacentElement`. However, the actual performance difference between these methods can vary depending on the specific use case, browser version, and other factors.

Related benchmarks:

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement add attribute x100 fix (version: 1)

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement add attribute

Comparing performance of: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

Created: 2 years ago by: Registered User

Jump to the latest result

innerHTML

insertAdjacentHTML

appendChild

insertAdjacentElement

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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