Benchmark: textContent vs nodeValue vs data (same-level)

HTML Preparation code:

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

Script Preparation code:

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

Tests:

element.textContent
a.textContent = Math.random();
node.textContent
a1.textContent = Math.random();
node.nodeValue
a1.nodeValue = Math.random();
node.data
a1.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: 6 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
element.textContent	1940736.5 Ops/sec
node.textContent	2716122.0 Ops/sec
node.nodeValue	2692835.8 Ops/sec
node.data	2616927.5 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 explanation of the provided benchmark.

**What is being tested?**

The benchmark tests the performance difference between accessing DOM node properties using `textContent`, `nodeValue`, and `data` (in newer browsers). The test cases are designed to measure the execution speed of these methods when used on a single child element (`firstChild`) of an HTML element (`document.querySelector('#el')`).

**Options being compared:**

The three options being compared are:

1. **`textContent`**: This method returns the text content of an element, including any descendant elements and their text nodes.
2. **`nodeValue`**: This method returns the text value of a single node (e.g., a text node or a character data node).
3. **`data`** (newer browsers only): This method is used to access the data attribute of an element, which can store arbitrary data.

**Pros and Cons:**

1. `textContent`:
	* Pros: More comprehensive and flexible than `nodeValue`.
	* Cons: May be slower for elements with no text content.
2. `nodeValue`:
	* Pros: Faster and more lightweight than `textContent`.
	* Cons: Limited to accessing the text value of a single node.
3. `data` (newer browsers):
	* Pros: More flexible and efficient than `nodeValue`, especially when working with data attributes.
	* Cons: Requires support for newer browsers, as older browsers do not have this method.

**Library usage:**

None of the test cases use any external libraries or frameworks.

**Special JS feature or syntax:**

The benchmark does not include any special JavaScript features or syntax. However, it's worth noting that the `data` attribute is a newer feature introduced in HTML5.

**Other alternatives:**

If you want to create similar benchmarks for other DOM property accessors, such as:

* `innerHTML`
* `outerHTML`
* `getAttribute()`
* `setAttribute()`

You can adjust the benchmark definition and test cases accordingly. For example, you could add a test case like:
```json
{
    "Benchmark Definition": "a.innerHTML = Math.random();",
    "Test Name": "element.innerHTML"
}
```
Keep in mind that each of these methods has its own pros and cons, which would need to be considered when creating benchmarks.

Related benchmarks:

textContent vs nodeValue vs data (same-level) (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

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