Benchmark: innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement add attribute fix6

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
box1.innerHTML += box2.outerHTML;
insertAdjacentHTML
box1.insertAdjacentHTML('beforeend', box2.outerHTML);
appendChild
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
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

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares four different approaches to update the content of an HTML element:

1. `innerHTML`
2. `insertAdjacentHTML` with the `beforeend` parameter
3. `appendChild`
4. `insertAdjacentElement` with the `beforeend` parameter

Each approach is compared on a specific test case, which creates two elements: `box1` and `box2`. The `box2` element has some attributes set (style, src, textContent) that are not present in the original `box1` element.

**Library Usage**

The benchmark uses the `outerHTML` property of the `box2` element to retrieve its HTML content. This is a standard JavaScript method that returns the full HTML content of an element, including all its children and attributes.

**Special JS Features/Syntax**

None of the approaches use any special JavaScript features or syntax that would require additional explanation.

**Approach Comparison**

The pros and cons of each approach are as follows:

1. **innerHTML**: This approach is generally slower than others because it requires parsing the entire HTML content, including all attributes and children.
	* Pros: Simple to implement, works well for small elements.
	* Cons: Slow, may cause performance issues when updating large or complex HTML content.
2. **insertAdjacentHTML** with `beforeend`:
	* Pros: Faster than `innerHTML`, allows for more control over the insertion point and can be used to create multiple insertions without re-parsing the entire HTML content.
	* Cons: May have compatibility issues in older browsers, requires careful consideration of attribute order and formatting.
3. **appendChild**:
	* Pros: Simple and efficient, works well for updating small elements or simple HTML content.
	* Cons: Requires more manual effort to update attributes and styles, may not be suitable for complex HTML content.
4. **insertAdjacentElement** with `beforeend`:
	* Pros: Similar benefits to `insertAdjacentHTML`, but allows for more control over the inserted element's position and formatting.
	* Cons: May have compatibility issues in older browsers, requires careful consideration of attribute order and formatting.

**Benchmark Results**

The benchmark results show that `insertAdjacentElement` is currently the fastest approach on this test case, followed by `insertAdjacentHTML`. The other approaches are slower due to their inherent parsing requirements.

In summary, while each approach has its pros and cons, `insertAdjacentElement` seems to be the most efficient method for updating HTML content in this specific benchmark. However, it's essential to consider compatibility issues and attribute ordering when using these methods in real-world applications.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Linux

View result in a separate tab

Test name	Executions per second
innerHTML	104.6 Ops/sec
insertAdjacentHTML	102789.7 Ops/sec
appendChild	168968.1 Ops/sec
insertAdjacentElement	187349.2 Ops/sec

Related benchmarks:

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement add attribute fix6 (version: 6)

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 23 days ago):