Benchmark: insertAdjacentHtml(loop) vs innerHTML(once)

HTML Preparation code:

<div id='target'></div>

Tests:

insertAdjacentHTML
const target = document.getElementById('target'); for(let i = 1; i <= 1000; i++) { target.insertAdjacentHTML('beforeend', `${i}`); }
innerHTML
const spans = new Array(1000).fill(0).map((v,i) => {return`${i}`}).join(""); document.getElementById('target').innerHTML = spans;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertAdjacentHTML
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what is being tested, compared, and other considerations.

**Benchmark Definition**

The benchmark definition is a simple script that creates two JavaScript functions to insert HTML content into an element: `insertAdjacentHtml` (loop) and `innerHTML` (once). The purpose of this benchmark is to compare the performance of these two approaches in inserting HTML content.

**Script Preparation Code**

There is no script preparation code provided, which means that the test starts from a clean slate. This is good because it allows for a fair comparison between the two functions.

**Html Preparation Code**

The html preparation code creates a simple HTML element with an ID of "target". This element will be used as the target for inserting HTML content.

**Individual Test Cases**

There are two individual test cases:

1. `insertAdjacentHtml`: This test case uses a loop to insert 1000 `` elements, one after another, using the `insertAdjacentHTML` function.
2. `innerHTML`: This test case creates an array of 1000 `` elements and then uses the `innerHTML` property to set the content of the target element.

**Library and Purpose**

In both test cases, no external libraries are used. However, it's worth noting that the `insertAdjacentHTML` function is supported by most modern browsers, while `innerHTML` has been around since older versions of Internet Explorer.

**Special JS Features or Syntax**

There doesn't appear to be any special JavaScript features or syntax being tested in this benchmark. The focus is on comparing two basic functions for inserting HTML content.

**Pros and Cons**

Here are some pros and cons of each approach:

* `insertAdjacentHtml` (loop):
	+ Pros: Can insert multiple elements at once, reducing the number of DOM mutations.
	+ Cons: May be slower due to the loop and the need to create an array of elements.
* `innerHTML`:
	+ Pros: Fast and efficient for inserting a small amount of content.
	+ Cons: Creates a new HTML string that needs to be parsed by the browser, which can be slow.

**Other Considerations**

When comparing these two approaches, it's essential to consider the following factors:

* The number of elements being inserted. If the number is small (e.g., 10-100), `innerHTML` might be faster. For larger numbers (e.g., 1000+), `insertAdjacentHtml` might be more efficient.
* The type of content being inserted. If it's simple text, `innerHTML` might be sufficient. However, if the content is complex or contains multiple elements, `insertAdjacentHtml` might be a better choice.

**Alternatives**

If you're interested in exploring other alternatives, here are a few:

1. `textContent`: This property can be used to set the text content of an element without creating a new HTML string.
2. `createElement` and `appendChild`: These methods can be used to create elements dynamically and append them to another element.
3. `renderList`: Some libraries (e.g., React, Angular) use this method to render lists of elements.

Keep in mind that each approach has its pros and cons, and the best choice depends on your specific use case and performance requirements.

Related benchmarks:

insertAdjacentHtml(loop) vs innerHTML(once) (version: 1)

insertAdjacentHtml(loop) vs innerHTML(once)

Comparing performance of: insertAdjacentHTML vs innerHTML

Created: 3 years ago by: Registered User

Jump to the latest result

insertAdjacentHTML

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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