Benchmark: innerHTML vs innerText vs custom

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!" }
innerText with Compare
var g_DOMParser = new DOMParser(); function decodeHTMLSymbols(htmlText) { return g_DOMParser.parseFromString(htmlText, "text/html").documentElement.textContent; } let i = 1000; let el = document.querySelector("#hello"); while (i--) { if (el.innerHTML != decodeHTMLSymbols("Goodbye, cruel world!")) { el.innerHtml = "Goodbye, cruel world!" } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
innerHtml
innerText with Compare

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; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Windows

View result in a separate tab

Test name	Executions per second
innerText	382.6 Ops/sec
innerHtml	519536.8 Ops/sec
innerText with Compare	24.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks.

**Benchmark Definition**

The benchmark measures the performance of three approaches to update the text content of an HTML element:

1. `innerHTML`: Setting the `innerHTML` property directly on the element.
2. `innerText`: Using the `innerText` property (available in modern browsers) or equivalent methods like `textContent` and `innerHTML` that only set the text content without modifying the DOM structure.
3. "custom": A custom implementation using a library to parse HTML symbols.

**Options Compared**

The benchmark compares the performance of these three approaches:

* **Pros and Cons:**
	+ `innerHTML`: Simple and straightforward, but can lead to DOM pollution if not used carefully. Can be slower due to the need to reparse the entire DOM.
	+ `innerText`: Modern browsers support this property, which is generally faster than `innerHTML`. However, older browsers may not support it.
	+ "custom": Uses a library to parse HTML symbols, which can be more efficient for complex updates. However, introduces additional dependencies and complexity.
* **Other Considerations:**
	+ The benchmark uses the `DOMParser` API to implement the custom approach, which is a relatively modern feature. This might limit its compatibility with older browsers.

**Library Used**

In the "custom" test case, the `DOMParser` library is used to parse HTML symbols. Specifically, it's used to decode HTML entities and preserve the original formatting of the input text.

**Special JS Feature/Syntax**

The benchmark uses modern JavaScript features like arrow functions (`=>`) and template literals (``). These are not specific to any particular browser or version, but can affect code readability and compatibility with older browsers.

**Benchmark Result**

The latest benchmark results show that:

* `innerHTML` is the slowest approach.
* `innerText` is faster than `innerHTML`, but slower than the custom implementation.
* The custom implementation uses a library to parse HTML symbols, which provides the best performance.

These results are likely influenced by factors like browser version, platform, and hardware capabilities. However, they provide a general idea of how these approaches compare in terms of performance.

Related benchmarks:

innerHTML vs innerText vs custom (version: 0)

blah blah

Comparing performance of: innerText vs innerHtml vs innerText with Compare

Created: one year ago by: Guest

Jump to the latest result

innerText

innerHtml

innerText with Compare

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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