Benchmark: innerHTML vs inserAdjacentHTML

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var text = 'check'

Tests:

innerHTML with var
document.getElementById('container').innerHTML = 'this is a ' + text
innerHTML with text
document.getElementById('container').innerHTML = 'this is a check'
innerHTML with template String
document.getElementById('container').innerHTML = `this is a ${text}`

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML with var
innerHTML with text
innerHTML with template String

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 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 three approaches to set innerHTML of an HTML element:

1. `innerHTML` with variable interpolation (`var`)
2. `innerHTML` with string concatenation
3. `innerHTML` with template literals (template String)

These tests aim to measure the performance difference between these approaches in various browsers.

**Options Being Compared**

The benchmark is comparing three options for setting innerHTML:

1. **Variable Interpolation (`var`)**: Using a variable to construct the string before setting it as innerHTML.
2. **String Concatenation**: Manually concatenating strings to form the final HTML content before setting it as innerHTML.
3. **Template Literals (template String)**: Using template literals to create the HTML content directly, which is then set as innerHTML.

**Pros and Cons of Each Approach**

Here's a brief overview:

1. **Variable Interpolation (`var`)**:
	* Pros: Simple and easy to read, especially for short strings.
	* Cons: May lead to performance issues if the variable contains complex logic or many string concatenations.
2. **String Concatenation**:
	* Pros: Allows for more control over the generated HTML content.
	* Cons: Can be verbose and less readable, especially for longer strings.
3. **Template Literals (template String)**:
	* Pros: Provides a concise way to create complex HTML content while still being readable.
	* Cons: May not work well with older browsers or environments that don't support template literals.

**Library Used**

None of the benchmark tests explicitly use any external libraries, but they do rely on JavaScript's built-in features and browser compatibility.

**Special JS Features/Syntax**

The benchmark uses:

1. **Template Literals (template String)**: Introduced in ECMAScript 2015 (ES6), these provide a convenient way to embed expressions inside string literals.
2. **Arrow Functions**: Not explicitly used, but arrow functions are not required for the benchmark's code.

**Other Alternatives**

If you're interested in exploring alternative approaches or optimizing innerHTML performance, consider:

1. **Using `textContent` instead of `innerHTML`**: When setting text content only, without HTML structure.
2. **Avoiding unnecessary reflows/repaints**: Optimize your code to minimize DOM manipulations and reduce the need for browser repaints.
3. **Utilizing browser-specific APIs or features**: Depending on the target browsers, you might find opportunities to use native APIs like WebAssembly, WebGL, or hardware acceleration.

Keep in mind that these alternatives are not directly related to the specific benchmark comparison being discussed.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML with var	282681.6 Ops/sec
innerHTML with text	312612.2 Ops/sec
innerHTML with template String	306523.1 Ops/sec

Related benchmarks:

innerHTML vs inserAdjacentHTML (version: 0)

Comparing performance of: innerHTML with var vs innerHTML with text vs innerHTML with template String

Created: 2 years ago by: Guest

Jump to the latest result

innerHTML with var

innerHTML with text

innerHTML with template String

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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