Benchmark: innerHTML vs innerText vs textContent Setting

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 = "setting"; }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.innerHTML = "setting"; }
textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { el.textContent = "setting"; }

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

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance differences between three common DOM properties: `innerText`, `innerHTML`, and `textContent`. These properties are used to set or get the text content of an HTML element.

**Options Compared**

The benchmark compares the execution speed of setting these three properties on the same HTML element. The test case is designed to simulate a scenario where the property value needs to be updated 1000 times.

**Pros and Cons of Each Approach**

* `innerText`:
	+ Pros: Fastest execution time, as it only updates the text content without affecting the element's structure.
	+ Cons: May not work correctly in all scenarios (e.g., when the element has nested elements).
* `innerHTML`:
	+ Pros: Works correctly with nested elements and can be used to update the entire HTML content of an element.
	+ Cons: Slower execution time due to the overhead of parsing and updating the HTML structure.
* `textContent`:
	+ Pros: Balances speed and correctness, as it only updates the text content while ignoring any nested HTML structure.
	+ Cons: May not work correctly with some browser implementations or older versions.

**Library Used**

There is no library explicitly used in this benchmark. However, the code uses the `document.querySelector` method to select an element by its ID, which is a standard JavaScript API for querying DOM elements.

**Special JS Feature/Syntax**

The benchmark does not use any special JavaScript features or syntax that would be specific to certain browsers or environments.

**Other Alternatives**

For similar benchmarks, you can consider testing other properties like `outerHTML` (similar to `innerHTML`, but also includes the element's attributes) or exploring different libraries and frameworks for DOM manipulation.

Latest run results:

Run details: (Test run date: 9 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	6986.4 Ops/sec
innerHtml	6545.6 Ops/sec
textContent	6423.3 Ops/sec

Related benchmarks:

innerHTML vs innerText vs textContent Setting (version: 0)

Comparing performance of: innerText vs innerHtml vs textContent

Created: 9 months ago by: Guest

Jump to the latest result

innerText

innerHtml

textContent

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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