Benchmark: textContent vs nodeValue vs data vs innerText

HTML Preparation code:

<div id="el"> </div>

Script Preparation code:

var a = document.querySelector('#el');

Tests:

element.textContent
a.textContent = Math.random();
node.textContent
a.firstChild.textContent = Math.random();
node.nodeValue
a.firstChild.nodeValue = Math.random();
node.data
a.firstChild.data = Math.random();
innerText
a.innerText = Math.random();

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

node.data

845K/s

node.nodeValue

832K/s

node.textContent

785K/s

element.textContent

503K/s

innerText

456K/s

Fastest: node.data (1.9x faster)

View exact numbers

✓ node.data: 845,138 ops/sec
• node.nodeValue: 832,088 ops/sec
• node.textContent: 784,636 ops/sec
• element.textContent: 502,913 ops/sec
• innerText: 455,527 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
element.textContent
node.textContent
node.nodeValue
node.data
innerText

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

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

Browser/OS: Chrome 144 on Windows

View result in a separate tab

node.nodeValue

493K/s

node.data

486K/s

node.textContent

464K/s

innerText

460K/s

element.textContent

440K/s

View exact numbers

Test name	Executions per second
✓ node.nodeValue	492,944 Ops/sec
node.data	485,746 Ops/sec
node.textContent	463,613 Ops/sec
innerText	460,213 Ops/sec
element.textContent	440,054 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided JSON represents a benchmark test on MeasureThat.net, which compares different approaches to accessing and setting text content in HTML elements. The test measures the performance of various methods for updating the text content of an element.

**Options Compared**

The benchmark tests four different options:

1. `textContent`: This property is used to set or get the text content of an element.
2. `nodeValue`: This property is used to set or get the value of a node, which can include text content, in a document.
3. `data`: This property is specifically designed for setting and getting the text content of an element.
4. `innerText` (note: this is not a standard property, but rather a proprietary one used by Internet Explorer): This property is used to set or get the inner text of an element.

**Pros and Cons**

* **textContent**: This is a widely supported property in modern browsers, including Chrome 126. However, it may not be as efficient as some other methods.
	+ Pros: Widespread support, easy to use.
	+ Cons: May not be optimized for performance.
* **nodeValue**: This property is also widely supported and can be used to set or get the value of a node, including text content. However, it may have slightly different behavior in certain cases.
	+ Pros: Similar to `textContent`, but with some additional features.
	+ Cons: May not be as intuitive for users who are only familiar with `textContent`.
* **data**: This property is specifically designed for setting and getting the text content of an element. It's also widely supported and optimized for performance.
	+ Pros: Optimized for performance, easy to use.
	+ Cons: Not all browsers support it (Internet Explorer).
* **innerText**:
	+ Pros: Widely supported in Internet Explorer and some other browsers.
	+ Cons: Non-standard, may not be as efficient as `textContent` or `data`.

**Library Usage**

None of the test cases use a library to access these properties. The properties themselves are part of the HTML DOM API.

**Special JavaScript Features/Syntax**

No special features or syntax are used in this benchmark.

**Other Alternatives**

If you need to compare text content performance, you may also consider using other methods, such as:

* Using a different property, like `innerHTML` (although this has its own set of pros and cons).
* Using a library like DOMPurify to sanitize the text content.
* Using a web worker or a worker thread to perform the operations in parallel.

Keep in mind that the choice of method depends on your specific use case, performance requirements, and browser support.

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

Comparing performance of: `element.textContent vs node.textContent vs node.nodeValue vs node.data vs innerText`

Created: 2 years ago by: Registered User

Go to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

innerText

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

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

Comparing performance of: element.textContent vs node.textContent vs node.nodeValue vs node.data vs innerText

Created: 2 years ago by: Registered User

Go to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

innerText

Historical Performance Data aggregated from 10 community runs

Desktop Results:

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

Comparing performance of: `element.textContent vs node.textContent vs node.nodeValue vs node.data vs innerText`