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

Historical Performance Data aggregated from 76 community runs

Desktop Results:

Chrome 49 runs

node.data

1.2M/s

node.nodeValue

1.1M/s

node.textContent

1.0M/s

element.textContent

686K/s

Fastest: node.data (1.7x faster)

View exact numbers

✓ node.data: 1,166,321 ops/sec
• node.nodeValue: 1,133,913 ops/sec
• node.textContent: 1,017,636 ops/sec
• element.textContent: 686,164 ops/sec

Firefox 27 runs

node.textContent

3.0M/s

node.nodeValue

2.9M/s

node.data

2.9M/s

element.textContent

441K/s

Fastest: node.textContent (6.8x faster)

View exact numbers

✓ node.textContent: 3,008,180 ops/sec
• node.nodeValue: 2,891,313 ops/sec
• node.data: 2,856,080 ops/sec
• element.textContent: 441,491 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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months 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

node.data

1.1M/s

node.nodeValue

1.1M/s

element.textContent

1.0M/s

node.textContent

1.0M/s

View exact numbers

Test name	Executions per second
✓ node.data	1,130,570 Ops/sec
node.nodeValue	1,119,472 Ops/sec
element.textContent	1,024,484 Ops/sec
node.textContent	1,017,636 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.

textContent vs nodeValue vs data (version: 0)

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

Created: 5 years ago by: Guest

Go to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

Historical Performance Data aggregated from 76 community runs

Desktop Results:

Chrome 49 runs

Firefox 27 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 (version: 0)

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

Created: 5 years ago by: Guest

Go to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

Historical Performance Data aggregated from 76 community runs

Desktop Results:

Chrome 49 runs

Firefox 27 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`