Benchmark: setting innerHTML vs innerText vs textContent

HTML Preparation code:


<div id='hello'>Hello, World!</div>

Script Preparation code:

let el = document.querySelector("#hello");

Tests:

innerText
let i = 10000; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye, cruel world!" }
innerHtml
let i = 10000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }
textContent
let i = 10000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye, cruel world!" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
innerHtml
textContent

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 27 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and results.

**Benchmark Definition**

The benchmark measures the performance of three different JavaScript methods for setting text content in an HTML element: `innerHTML`, `innerText`, and `textContent`.

Each test case creates a variable `i` set to 10,000, selects an HTML element with the id "hello" using `document.querySelector`, and then runs a while loop that sets the text content of the element to a string using one of the three methods. The loop is executed 10,000 times.

**Test Cases**

1. **innerText**: This test case uses the `innerText` property to set the text content of the HTML element.
2. **innerHtml**: This test case uses the `innerHTML` property (note: there's a typo in the JSON, it should be `innerHTML`, not `innerHtml`) to set the text content of the HTML element. However, setting innerHTML is generally discouraged when only updating the text content, as it can lead to unnecessary DOM mutations.
3. **textContent**: This test case uses the `textContent` property to set the text content of the HTML element.

**Benchmark Results**

The results show the execution time per second for each test case on a Firefox 130 browser running on Mac OS X 10.15:

1. **innerHtml**: The fastest method, with an average execution time of approximately 38635 executions per second.
2. **textContent**: The slowest method, with an average execution time of approximately 37 executions per second.
3. **innerText**: The middle ground, with an average execution time of approximately 30 executions per second.

**Pros and Cons**

* `innerHTML`:
	+ Pros: Fastest method for setting text content.
	+ Cons: Can lead to unnecessary DOM mutations, which can be costly in terms of performance and maintainability.
* `innerText`:
	+ Pros: Efficient for setting text content without modifying the HTML structure.
	+ Cons: May not work correctly in certain edge cases (e.g., when working with elements containing child nodes).
* `textContent`:
	+ Pros: Most straightforward and intuitive method for setting text content.
	+ Cons: Slowest method, which can impact performance-critical code.

**Other Considerations**

When choosing a method, consider the specific requirements of your application:

* If you need to update only the text content without modifying the HTML structure, `innerText` or `textContent` might be suitable choices.
* However, if you're working with complex HTML structures and need to maintain performance, using `innerHTML` is generally recommended.

**Library Usage**

No external libraries are used in this benchmark definition.

**Special JS Feature or Syntax**

The test cases use a simple while loop, which doesn't involve any special JavaScript features or syntax.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
innerText	30.6 Ops/sec
innerHtml	38635.9 Ops/sec
textContent	37.4 Ops/sec

Related benchmarks:

setting innerHTML vs innerText vs textContent (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml vs textContent

Created: one year ago by: Guest

Jump to the latest result

innerText

innerHtml

textContent

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 27 days ago):