Benchmark: textContent vs. innerText vs. nodeValue

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

Compare the performance of different ways of setting text.

Comparing performance of: set same value via textContent vs set same value via innerText vs set different value via textContext vs set different value via innerText vs set same value if changed via textContent vs set same value if changed via innerText vs set different value if changed via textContent vs set different value if changed via innerText vs set same value via nodeValue vs set different value via nodeValue vs set same value if changed via nodeValue vs set different value if changed via nodeValue

Created: one year ago by: Guest

Jump to the latest result

HTML Preparation code:

<div id='div'>test</div>

Script Preparation code:

var div = document.getElementById('div');

Tests:

set same value via textContent
div.textContent = 'test';
set same value via innerText
div.innerText = 'test';
set different value via textContext
div.textContent = 'other';
set different value via innerText
div.innerText = 'other';
set same value if changed via textContent
if (div.textContent !== 'test') div.textContent = 'test';
set same value if changed via innerText
if (div.innerText !== 'test') div.innerText = 'test';
set different value if changed via textContent
if (div.textContent !== 'other') div.textContent = 'other';
set different value if changed via innerText
if (div.innerText !== 'other') div.innerText = 'other';
set same value via nodeValue
div.firstChild.nodeValue = 'same';
set different value via nodeValue
div.firstChild.nodeValue = 'other';
set same value if changed via nodeValue
if (div.firstChild.nodeValue !== 'test') div.firstChild.nodeValue = 'test';
set different value if changed via nodeValue
if (div.firstChild.nodeValue !== 'other') div.firstChild.nodeValue = 'other';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
set same value via textContent
set same value via innerText
set different value via textContext
set different value via innerText
set same value if changed via textContent
set same value if changed via innerText
set different value if changed via textContent
set different value if changed via innerText
set same value via nodeValue
set different value via nodeValue
set same value if changed via nodeValue
set different value if changed via nodeValue

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
set same value via textContent	6186312.0 Ops/sec
set same value via innerText	1613896.2 Ops/sec
set different value via textContext	6650269.5 Ops/sec
set different value via innerText	1716834.2 Ops/sec
set same value if changed via textContent	9741445.0 Ops/sec
set same value if changed via innerText	716280.2 Ops/sec
set different value if changed via textContent	9172154.0 Ops/sec
set different value if changed via innerText	720020.6 Ops/sec
set same value via nodeValue	4202700.5 Ops/sec
set different value via nodeValue	2993717.2 Ops/sec
set same value if changed via nodeValue	15540349.0 Ops/sec
set different value if changed via nodeValue	14134544.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The benchmark measures the performance of different ways to set text on an HTML element's content attribute in JavaScript. The test cases compare the execution time of setting the text using `textContent`, `innerText`, and `nodeValue` properties.

**Options Compared**

1. **textContent**: Sets the text content of an element, including any child elements.
2. **innerText**: Sets the inner text of an element, without setting the outer HTML or child elements.
3. **nodeValue**: Sets the node value of an element, which is equivalent to `innerText` for text nodes.

**Performance Results**

The benchmark results show that:

* `nodeValue` (equivalent to `innerText`) is generally the fastest option, with average execution times ranging from 200ms to 800ms.
* `textContent` is slower than `nodeValue`, with average execution times ranging from 500ms to 2s.
* `innerText` is generally faster than `textContent`, but still slower than `nodeValue`.

**Key Takeaways**

1. For text nodes, using `nodeValue` (or equivalently, `innerText`) is the fastest option.
2. For elements with child content, `textContent` may be faster due to its ability to update only the child content.
3. The performance differences are relatively small, and the choice of method may depend on specific use cases or personal preference.

**Code Quality Notes**

While not explicitly mentioned in the benchmark results, it's worth noting that using `nodeValue` (or `innerText`) can be more efficient than setting `textContent`, as it avoids unnecessary updates to the element's outer HTML. Additionally, some browsers may have specific optimizations for these properties, so results may vary depending on the browser and version.

Related benchmarks:

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

Compare the performance of different ways of setting text.

Created: one year ago by: Guest

Jump to the latest result

set same value via textContent

set same value via innerText

set different value via textContext

set different value via innerText

set same value if changed via textContent

set same value if changed via innerText

set different value if changed via textContent

set different value if changed via innerText

set same value via nodeValue

set different value via nodeValue

set same value if changed via nodeValue

set different value if changed via nodeValue

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):