Benchmark: innerHTML vs innerText vs 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!" }
textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "Goodbye, cruel world!" }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHtml = "Goodbye, cruel world!" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
textContent
innerHtml

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerText	6645.4 Ops/sec
textContent	7364.7 Ops/sec
innerHtml	735234.4 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 microbenchmarks.

**Benchmark Overview**

The benchmark measures the performance difference between three ways to update the text content of an HTML element: `innerText`, `textContent`, and `innerHTML`. The test case uses the `document.querySelector` method to retrieve a DOM element, which is updated repeatedly in a loop.

**Options Comparison**

1. **innerText**: This option updates the text content using the `innerText` property.
	* Pros:
		+ Fastest way to update text content (typically 2-4 CPU cycles).
		+ Wide browser support.
	* Cons:
		+ Can lead to inconsistent rendering in certain browsers.
		+ May not work as expected with complex or nested HTML elements.
2. **textContent**: This option updates the text content using the `textContent` property.
	* Pros:
		+ More consistent rendering across browsers compared to `innerText`.
		+ Handles complex and nested HTML elements better than `innerText`.
	* Cons:
		+ Slightly slower than `innerText` (typically 4-6 CPU cycles).
3. **innerHTML**: This option updates the inner HTML using the `innerHTML` property.
	* Pros:
		+ Fastest way to update inner HTML (typically 2-4 CPU cycles).
		+ Works well with complex and nested HTML elements.
	* Cons:
		+ Can lead to security vulnerabilities if not sanitized properly.
		+ May cause performance issues due to excessive DOM updates.

**Library Usage**

In this benchmark, the `document.querySelector` method is used to retrieve a DOM element. This method is part of the DOM API and is widely supported by modern browsers. It's not specific to any particular library.

**Special JS Features or Syntax**

None mentioned in the provided code snippet. However, if we consider the `innerText`, `textContent`, and `innerHTML` properties themselves, they are special features that allow for faster and more efficient text updates:

* `innerText`: Introduced in ECMAScript 2015 (ES6), this property provides a fast and consistent way to update text content.
* `textContent`: Also introduced in ECMAScript 2015 (ES6), this property is similar to `innerText` but has additional features for handling complex and nested HTML elements.
* `innerHTML`: This property has been part of the DOM API since its inception, allowing for fast and efficient updates to inner HTML.

**Other Alternatives**

For those interested in exploring other alternatives:

1. **DOM Traversal**: Instead of using `document.querySelector`, you could use DOM traversal methods like `getElementsByTagName` or `getElementsByClassName` to update text content.
2. **Template Literals**: You could use template literals (e.g., `let el = document.querySelector('#hello'); el.innerHTML = 'Hello, World!';`) for faster and more efficient string concatenation.
3. **DOM Manipulation APIs**: Consider using modern DOM manipulation APIs like `DOMParser` or `XMLSerializer` for efficient text updates.

Keep in mind that the choice of approach depends on your specific use case and performance requirements. This benchmark aims to provide a general understanding of the performance differences between these options.

Related benchmarks:

innerHTML vs innerText vs textContent .. (version: 0)

Comparing performance of: innerText vs textContent vs innerHtml

Created: 11 months ago by: Guest

Jump to the latest result

innerText

textContent

innerHtml

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):