Benchmark: innerHTML vs innerText vs compare innerHTML vs compare innerText

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
let i = 1000; let el = document.querySelector("#hello"); while (i--) { if (el.innerHtml != "Goodbye, cruel world!") { el.innerHtml = "Goodbye, cruel world!" } }
innerHtml 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
innerHtml 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:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Windows

View result in a separate tab

innerText with Compare

668K/s

innerHtml

386K/s

innerText

762/s

innerHtml with Compare

58/s

View exact numbers

Test name	Executions per second
✓ innerText with Compare	667,858 Ops/sec
innerHtml	385,864 Ops/sec
innerText	762 Ops/sec
innerHtml with Compare	58 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net is testing three different approaches to set text content on an HTML element:

1. `innerText`
2. `innerHTML`
3. `innerText` with comparison (`innerText with Compare`)
4. `innerHTML` with comparison (`innerHtml with Compare`)

These tests aim to measure the performance difference between these four approaches.

**Options compared:**

* `innerText`: uses the `textContent` property of an HTML element to set its text content.
* `innerHTML`: sets the inner HTML of an element using the `innerHTML` property.
* `innerText with Compare`: uses a comparison to verify if the text content has changed before setting it again. This approach involves parsing HTML and checking for differences.
* `innerHtml with Compare`: similar to the previous one, but uses the `innerHTML` property instead.

**Pros and Cons of each approach:**

1. `innerText`:
	* Pros: faster and more efficient, as it only updates the text content without involving the DOM parser or parsing HTML.
	* Cons: may not work correctly with certain characters or syntax (e.g., HTML entities).
2. `innerHTML`:
	* Pros: works well with most characters and syntax, including HTML entities.
	* Cons: slower than `innerText`, as it involves parsing HTML and updating the DOM tree.
3. `innerText with Compare`:
	* Pros: ensures that the text content has changed before setting it again, which can be useful in certain scenarios.
	* Cons: slower due to the additional parsing and comparison step.
4. `innerHtml with Compare`:
	* Similar pros and cons as `innerText with Compare`.

**Library used:**

In one of the test cases (`innerHtml with Compare`), a library called `DOMParser` is used to parse HTML and check for differences.

**Special JS features/syntax:**

None mentioned in this specific benchmark, but it's worth noting that some JavaScript features like arrow functions, template literals, or async/await may affect performance in certain scenarios.

innerHTML vs innerText vs compare innerHTML vs compare innerText (version: 0) Benchmark.js

blah blah

Comparing performance of: `innerText vs innerHtml vs innerText with Compare vs innerHtml with Compare`

Created: 3 years ago by: Guest

Go to the latest result

innerText

innerHtml

innerText with Compare

innerHtml with Compare

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

innerHTML vs innerText vs compare innerHTML vs compare innerText (version: 0) Benchmark.js

blah blah

Comparing performance of: innerText vs innerHtml vs innerText with Compare vs innerHtml with Compare

Created: 3 years ago by: Guest

Go to the latest result

innerText

innerHtml

innerText with Compare

innerHtml with Compare

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `innerText vs innerHtml vs innerText with Compare vs innerHtml with Compare`