Benchmark: innerHTML - innerText - textContent

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark measures the performance of three different ways to update the text content of an HTML element: `innerHTML`, `innerText`, and `textContent`.

**Options Compared**

The benchmark compares the performance of three options:

1. **innerHTML**: This method sets the inner HTML of the element, which includes not only the text content but also any HTML markup.
2. **innerText**: This method sets only the text content of the element, without including any HTML markup.
3. **textContent**: This method sets only the text content of the element, similar to `innerText`, but with some differences in implementation (more on this later).

**Pros and Cons**

Here are the pros and cons of each option:

* **innerHTML**:
	+ Pros: Simple to use, works consistently across browsers.
	+ Cons: Can be slow because it involves parsing and manipulating HTML markup.
* **innerText**:
	+ Pros: Fast and lightweight, as it only updates text content.
	+ Cons: May not work in all browsers or situations (e.g., some legacy browsers may not support it).
* **textContent**:
	+ Pros: Similar to `innerText`, but with improved performance and compatibility.
	+ Cons: Some older browsers may not support it.

**Library Usage**

The benchmark uses the `document.querySelector` method to select an HTML element, which is a part of the Web APIs. No specific library is used in this example.

**Special JS Features or Syntax**

None are mentioned in the provided benchmark definition.

**Benchmark Results**

The latest benchmark results show that:

* **innerHtml**: 877446 executions per second (Chrome 117 on Desktop)
* **textContent**: 2836.927734375 executions per second (Chrome 117 on Desktop)
* **innerText**: 615.3272705078125 executions per second (Chrome 117 on Desktop)

As expected, `textContent` is the fastest option, followed by `innerHTML`, and then `innerText`.

**Other Alternatives**

If you need to update the text content of an HTML element in a performance-critical scenario, you may also consider using:

* **DOM Traversal**: This involves traversing the DOM tree to find the element and update its text content. While not typically faster than `textContent`, it can be useful for more complex scenarios.
* **Native APIs**: Depending on your platform, you may have access to native APIs that provide optimized text updating capabilities (e.g., Windows API for Windows).

Keep in mind that these alternatives may have different performance characteristics and are usually specific to a particular platform or library.

I hope this explanation helps!

Related benchmarks:

innerHTML - innerText - textContent (version: 0)

Test performance of innerHTML - innerText - textContent

Comparing performance of: innerText vs innerHtml vs textContent

Created: 2 years ago by: Registered User

Jump to the latest result

innerText

innerHtml

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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