Benchmark: innerHTML vs innerText vs textContent 3

HTML Preparation code:

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

Script Preparation code:

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

Tests:

innerText
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerText = "Goodbye, cruel world!" }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }
textContent
let i = 1000; 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

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
innerText	437.5 Ops/sec
innerHtml	488978.0 Ops/sec
textContent	364.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark test, specifically comparing the performance of three different ways to update the text content of an HTML element: `innerHTML`, `innerText`, and `textContent`. The test uses a simple example where it updates the text content of an HTML element 1000 times using each method.

**Options being compared**

The options being compared are:

1. **`innerHTML`**: sets the inner HTML of an element, including its contents, styles, and attributes.
2. **`innerText`**: sets the text content of an element without modifying its styles or attributes.
3. **`textContent`**: sets the text content of an element without modifying its styles or attributes, similar to `innerText`. However, it also preserves whitespace and other formatting.

**Pros and Cons**

* **`innerHTML`**:
	+ Pros: allows for setting both text content and HTML structure in a single operation.
	+ Cons: can be slower and more memory-intensive due to the need to parse and serialize HTML data.
* **`innerText`**:
	+ Pros: faster and more lightweight than `innerHTML`, but only sets text content without modifying styles or attributes.
	+ Cons: may not preserve whitespace or other formatting, requires setting both style and content.
* **`textContent`**:
	+ Pros: similar to `innerText`, but preserves whitespace and other formatting.
	+ Cons: still slower than `innerText`, and may require more memory due to the need to handle different types of text nodes.

**Libraries used**

None are explicitly mentioned in the provided code. However, it's likely that a standard JavaScript DOM API is being used.

**Special JS features or syntax**

No special JavaScript features or syntax are used in this test case. The benchmark only focuses on comparing the performance of three basic DOM methods.

**Alternatives**

Other alternatives for updating text content include:

* Using `replaceChild` to replace the existing child element with a new one.
* Using `slice` and concatenating strings to build the text content.
* Using a library like jQuery or a custom implementation that uses a different approach to update text content.

It's worth noting that modern JavaScript engines, including those used by Firefox, have optimized implementations for these three methods, making them generally fast and efficient. However, the specific performance characteristics of each method may still vary depending on the use case and environment.

Related benchmarks:

innerHTML vs innerText vs textContent 3 (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml vs textContent

Created: 2 years ago by: Guest

Jump to the latest result

innerText

innerHtml

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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