Benchmark: textContent vs nodeValue vs data

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
element.textContent
node.textContent
node.nodeValue
node.data

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 days ago)

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
element.textContent	1024483.6 Ops/sec
node.textContent	1017635.6 Ops/sec
node.nodeValue	1119471.8 Ops/sec
node.data	1130570.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of different ways to retrieve text content from an HTML element in JavaScript. Specifically, it's comparing four approaches:

1. `textContent`: The text content of the element itself (i.e., the value inside the `<div>`)
2. `nodeValue`: The text content of the first child element of the element (i.e., the text inside a `<span>` or `<p>`)
3. `data`: The data of the element itself (this is not a standard property and may be specific to certain browsers or libraries)

**Options compared**

MeasureThat.net is comparing the performance of these four approaches:

* `element.textContent`
* `node.textContent` (where `node` is the first child element of the original element)
* `node.nodeValue`
* `node.data`

**Pros and Cons of each approach:**

1. **`textContent`**:
	* Pros: Simple, widely supported, and efficient.
	* Cons: May not return text content if the element has other attributes or children that affect its rendering.
2. **`nodeValue`**:
	* Pros: Returns the text content of a specific child element, which can be useful in certain cases.
	* Cons: Requires knowing the existence and type of a specific child element, which may not always be reliable.
3. **`nodeValue` vs `data`**: These two are similar but have different use cases:
	* `nodeValue` returns the text content of a specific child element (similar to `textContent`, but with more specificity).
	* `data` is not a standard property and may only work in certain browsers or libraries.
4. **Using a library vs native JavaScript**:
	* Using a library like jQuery or a custom implementation can provide additional features, error handling, and performance optimizations.
	* Native JavaScript approaches are often simpler, more lightweight, and widely supported.

**Library**

None is explicitly mentioned in the provided code snippet. However, if you were to use libraries like jQuery or a custom implementation, they would likely provide optimized functions for each of these approaches.

**Special JS feature/syntax**

There doesn't appear to be any special JavaScript features or syntax used in this benchmark. The focus is on comparing different ways to retrieve text content from an HTML element.

**Alternatives**

Other alternatives to measure the performance of retrieving text content from an HTML element include:

* Using `outerHTML` instead of `textContent`
* Retrieving the text content using a regular expression (e.g., `element.textContent.match(/\S+/)[0]`)
* Using a more modern approach like `element.textContent.trim()` or `element.textContent.replace(/^\s+|\s+$/g, '')`

Keep in mind that these alternatives might have different performance characteristics and may not be as straightforward to implement as the approaches being compared in this benchmark.

Related benchmarks:

textContent vs nodeValue vs data (version: 0)

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

Created: 4 years ago by: Guest

Jump to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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