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: 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 5 community runs

Desktop Results:

Chrome 5 runs

set same value if changed via nodeValue

15.5M/s

set different value if changed via nodeValue

14.1M/s

set same value if changed via textContent

9.7M/s

set different value if changed via textContent

9.2M/s

set same value via textContent

6.2M/s

set different value via textContext

6.1M/s

set same value via nodeValue

4.9M/s

set different value via nodeValue

3.8M/s

set different value via innerText

1.7M/s

set same value via innerText

1.6M/s

set same value if changed via innerText

835K/s

set different value if changed via innerText

827K/s

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

View exact numbers

✓ set same value if changed via nodeValue: 15,540,349 ops/sec
• set different value if changed via nodeValue: 14,134,544 ops/sec
• set same value if changed via textContent: 9,741,445 ops/sec
• set different value if changed via textContent: 9,172,154 ops/sec
• set same value via textContent: 6,186,312 ops/sec
• set different value via textContext: 6,120,836 ops/sec
• set same value via nodeValue: 4,942,868 ops/sec
• set different value via nodeValue: 3,845,782 ops/sec
• set different value via innerText: 1,716,834 ops/sec
• set same value via innerText: 1,613,896 ops/sec
• set same value if changed via innerText: 834,505 ops/sec
• set different value if changed via innerText: 827,099 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: 6 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Linux

View result in a separate tab

set same value if changed via textContent

1164.6M/s

set same value if changed via nodeValue

988.9M/s

set different value if changed via textContent

913.3M/s

set different value if changed via nodeValue

903.2M/s

set same value via nodeValue

5.5M/s

set different value via nodeValue

5.1M/s

set same value via textContent

4.8M/s

set different value via textContext

4.5M/s

set same value if changed via innerText

4.4M/s

set different value if changed via innerText

4.4M/s

set different value via innerText

1.7M/s

set same value via innerText

1.6M/s

View exact numbers

Test name	Executions per second
✓ set same value if changed via textContent	1,164,551,424 Ops/sec
set same value if changed via nodeValue	988,858,880 Ops/sec
set different value if changed via textContent	913,261,568 Ops/sec
set different value if changed via nodeValue	903,157,696 Ops/sec
set same value via nodeValue	5,534,910 Ops/sec
set different value via nodeValue	5,149,934 Ops/sec
set same value via textContent	4,772,984 Ops/sec
set different value via textContext	4,465,058 Ops/sec
set same value if changed via innerText	4,396,929 Ops/sec
set different value if changed via innerText	4,395,366 Ops/sec
set different value via innerText	1,666,912 Ops/sec
set same value via innerText	1,596,538 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)

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 5 community runs

Desktop Results:

Chrome 5 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