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();

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

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
element.textContent	982615.9 Ops/sec
node.textContent	841733.7 Ops/sec
node.nodeValue	1207560.0 Ops/sec
node.data	1169120.9 Ops/sec
innerText	285856.0 Ops/sec

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

Related benchmarks:

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: 10 months ago by: Registered User

Jump to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

innerText

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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