Benchmark: innerHTML vs insertAdjacentHTML template

Tests:

innerHTML
const template = document.createElement("template"); template.innerHTML = "<div></div>"
insertAdjacentHTML
const template = document.createElement("template"); template.insertAdjacentHTML("afterbegin", "<div></div>")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
insertAdjacentHTML

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	154618.4 Ops/sec
insertAdjacentHTML	150956.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The benchmark is designed to compare two approaches for rendering HTML templates in a browser: `innerHTML` and `insertAdjacentHTML`. The benchmark uses the `template` element, which is a Web Components API that allows creating and manipulating HTML templates.

**Script Preparation Code**

There is no script preparation code provided for this benchmark. This means that the JavaScript engine will create the template element and assign it to the `template` variable without any additional setup or initialization code.

**Html Preparation Code**

Similarly, there is no html preparation code provided for this benchmark. The HTML code for the test case is hard-coded directly into the `Benchmark Definition` JSON:

```
const template = document.createElement("template");
template.innerHTML = "<div></div>";
```

```
const template = document.createElement("template");
template.insertAdjacentHTML("afterbegin", "<div></div>");
```

**Individual Test Cases**

There are two test cases in this benchmark:

1. **innerHTML**: This test case creates a new `template` element and assigns an HTML string to its `innerHTML` property.
2. **insertAdjacentHTML**: This test case also creates a new `template` element, but instead of assigning an HTML string to its `innerHTML` property, it uses the `insertAdjacentHTML` method to insert an HTML fragment into the template.

**Library and Purpose**

In this benchmark, the Web Components API (`template`) is used to create and manipulate HTML templates. The `template` element is a new addition to the Web Components API, introduced in Chrome 85 (released in March 2020).

**Special JS Feature or Syntax**

The benchmark uses the `insertAdjacentHTML` method, which was introduced in ECMAScript 2019 (ES11). This method allows inserting HTML fragments into an element without the need for `innerHTML` or other methods.

**Pros and Cons of Different Approaches**

1. **innerHTML**: This approach is widely supported across browsers but can be slower due to the overhead of parsing and sanitizing user-supplied HTML.
	* Pros: Easy to use, well-supported by most browsers.
	* Cons: Can be slow, less efficient than other approaches.
2. **insertAdjacentHTML**: This approach provides better performance and efficiency compared to `innerHTML`, as it avoids parsing and sanitizing user-supplied HTML.
	* Pros: Faster, more efficient, and less error-prone.
	* Cons: May not be supported by older browsers.

**Other Alternatives**

Some other alternatives for rendering HTML templates in a browser include:

1. **DOM manipulation**: Using traditional DOM methods (e.g., `createElement`, `appendChild`) to build and render the HTML template.
2. **Shadow DOM**: Using Shadow DOM, which allows creating isolated DOM trees that can be used for templating purposes.

However, Web Components API (`template`) is a popular choice for building reusable UI components and templates due to its simplicity and flexibility.

**Additional Considerations**

When choosing an approach for rendering HTML templates in a browser, consider factors such as:

1. **Browser support**: Ensure the chosen approach is supported by your target browsers.
2. **Performance**: Choose an approach that balances performance with ease of use and maintainability.
3. **Security**: Be aware of potential security risks associated with user-supplied HTML.

I hope this explanation helps you understand what's being tested in MeasureThat.net!

Related benchmarks:

innerHTML vs insertAdjacentHTML template (version: 0)

Comparing performance of: innerHTML vs insertAdjacentHTML

Created: 4 years ago by: Guest

Jump to the latest result

innerHTML

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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