Benchmark: textContent vs. innerText vs. nodeValue

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

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: 2 years ago by: Guest

Go 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';

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

set same value if changed via nodeValue

18.8M/s

set different value if changed via nodeValue

17.7M/s

set different value if changed via textContent

10.3M/s

set same value if changed via textContent

10.3M/s

set same value via textContent

5.8M/s

set different value via textContext

5.7M/s

set same value via nodeValue

5.1M/s

set different value via nodeValue

4.0M/s

set different value via innerText

1.7M/s

set same value via innerText

1.7M/s

set same value if changed via innerText

971K/s

set different value if changed via innerText

928K/s

Fastest: set same value if changed via nodeValue (20.2x faster)

View exact numbers

✓ set same value if changed via nodeValue: 18,767,200 ops/sec
• set different value if changed via nodeValue: 17,701,644 ops/sec
• set different value if changed via textContent: 10,340,200 ops/sec
• set same value if changed via textContent: 10,310,570 ops/sec
• set same value via textContent: 5,784,106 ops/sec
• set different value via textContext: 5,702,830 ops/sec
• set same value via nodeValue: 5,070,411 ops/sec
• set different value via nodeValue: 4,039,656 ops/sec
• set different value via innerText: 1,723,966 ops/sec
• set same value via innerText: 1,675,890 ops/sec
• set same value if changed via innerText: 971,248 ops/sec
• set different value if changed via innerText: 928,127 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 17 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/152.0.0.0 Safari/537.36

Browser/OS: Chrome 152 on Mac OS X 10.15.7

View result in a separate tab

set same value if changed via nodeValue

55.2M/s

set different value if changed via nodeValue

50.9M/s

set same value if changed via textContent

40.5M/s

set different value if changed via textContent

39.0M/s

set same value via nodeValue

17.3M/s

set different value via nodeValue

12.2M/s

set same value if changed via innerText

2.8M/s

set different value if changed via innerText

2.8M/s

set same value via innerText

2.7M/s

set different value via textContext

2.7M/s

set same value via textContent

2.3M/s

set different value via innerText

2.1M/s

View exact numbers

Test name	Executions per second
✓ set same value if changed via nodeValue	55,223,476 Ops/sec
set different value if changed via nodeValue	50,932,320 Ops/sec
set same value if changed via textContent	40,528,132 Ops/sec
set different value if changed via textContent	38,999,604 Ops/sec
set same value via nodeValue	17,258,564 Ops/sec
set different value via nodeValue	12,234,729 Ops/sec
set same value if changed via innerText	2,814,225 Ops/sec
set different value if changed via innerText	2,758,088 Ops/sec
set same value via innerText	2,701,270 Ops/sec
set different value via textContext	2,683,920 Ops/sec
set same value via textContent	2,304,137 Ops/sec
set different value via innerText	2,109,027 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

Compare the performance of different ways of setting text.

Created: 2 years ago by: Guest

Go 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

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

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