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

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days 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.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:124.0) Gecko/20100101 Firefox/124.0

Browser/OS: Firefox 124 on Ubuntu

View result in a separate tab

Test name	Executions per second
innerText	899.0 Ops/sec
innerHtml	1053522.5 Ops/sec
textContent	1066.6 Ops/sec

Related benchmarks:

innerHTML vs innerText vs textContent 3 (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.2:3b, generated 26 days ago):