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

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

Test name	Executions per second
set same value via textContent	4772984.5 Ops/sec
set same value via innerText	1596538.5 Ops/sec
set different value via textContext	4465057.5 Ops/sec
set different value via innerText	1666912.5 Ops/sec
set same value if changed via textContent	1164551424.0 Ops/sec
set same value if changed via innerText	4396929.0 Ops/sec
set different value if changed via textContent	913261568.0 Ops/sec
set different value if changed via innerText	4395366.0 Ops/sec
set same value via nodeValue	5534910.5 Ops/sec
set different value via nodeValue	5149934.5 Ops/sec
set same value if changed via nodeValue	988858880.0 Ops/sec
set different value if changed via nodeValue	903157696.0 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.

Related benchmarks: