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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Windows

View result in a separate tab

appendChild

6K/s

insertAdjacentElement

5K/s

insertAdjacentHTML

4K/s

innerHTML

4/s

View exact numbers

Test name	Executions per second
✓ appendChild	5,911 Ops/sec
insertAdjacentElement	4,862 Ops/sec
insertAdjacentHTML	4,086 Ops/sec
innerHTML	4 Ops/sec

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

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

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement add attribute

Comparing performance of: `innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement`

Created: 4 years ago by: Registered User

Go to the latest result

innerHTML

insertAdjacentHTML

appendChild

insertAdjacentElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement add attribute

Comparing performance of: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

Created: 4 years ago by: Registered User

Go to the latest result

innerHTML

insertAdjacentHTML

appendChild

insertAdjacentElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement`