Benchmark: innerHTML vs innerText vs custom

HTML Preparation code:

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

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

Script Preparation code:

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

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

Tests:

innerText

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

 
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!"
}

 
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!"
    }
}

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
innerText
innerHtml
innerText with Compare

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years 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 7 months ago):

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:

innerHTML: Setting the innerHTML property directly on the element.
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.
"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.

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: 2 years ago by: Guest

Jump to the latest result