Benchmark: Reading textContent vs. nodeValue (incl. optional chaining) [FIXED]

HTML Preparation code:

<div id="div">test</div>

Script Preparation code:

var div = document.getElementById('div');

Tests:

Read textContent
div.textContent
Read textContent (incl. optional chaining)
div?.textContent
Read nodeValue
div.firstChild.nodeValue
Read nodeValue (incl. optional chaining)
div?.firstChild?.nodeValue

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Read textContent
Read textContent (incl. optional chaining)
Read nodeValue
Read nodeValue (incl. optional chaining)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Read textContent	9351426.0 Ops/sec
Read textContent (incl. optional chaining)	7012178.0 Ops/sec
Read nodeValue	15081601.0 Ops/sec
Read nodeValue (incl. optional chaining)	16555946.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 27 days ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark is designed to compare the performance of different methods to read the textual content of a DOM element in JavaScript, specifically focusing on the `textContent` property vs. the `nodeValue` property. It also examines the impact of using optional chaining—a feature introduced in ES2020 (ECMAScript 2020)—which provides a way to safely access deeply nested properties without running into errors when encountering `undefined` or `null`.

### Comparison of Options Tested

1. **Reading `textContent`:**
   - **Syntax:** `div.textContent`
   - **Description:** Reads the text content of the `div` element directly.
   - **Performance:** The benchmark shows that this approach is the slowest among the tested options, with approximately 9.3 million executions per second.
   - **Pros:** 
     - Simpler syntax.
     - Directly reads the rendered text content of the element.
   - **Cons:** 
     - Slightly lower performance compared to `nodeValue`.

2. **Reading `textContent` with optional chaining:**
   - **Syntax:** `div?.textContent`
   - **Description:** Safely reads the `textContent` of the `div` element, using optional chaining in case `div` is `null` or `undefined`.
   - **Performance:** This approach exhibits the least performance, with about 7 million executions per second.
   - **Pros:**
     - Avoids runtime errors when `div` may not exist, making the code safer.
   - **Cons:**
     - Performance is impacted due to the additional check; hence, it's slower than accessing `textContent` directly.

3. **Reading `nodeValue`:**
   - **Syntax:** `div.firstChild.nodeValue`
   - **Description:** Accesses the `nodeValue` property of the first child node of the `div`.
   - **Performance:** This method performs better than reading `textContent`, clocking in at around 15 million executions per second.
   - **Pros:** 
     - Better performance compared to reading `textContent`.
     - Allows access to the raw text in a more granular way, as `nodeValue` can be utilized for text nodes.
   - **Cons:** 
     - May return `null` if there are no child nodes, requiring additional checks.

4. **Reading `nodeValue` with optional chaining:**
   - **Syntax:** `div?.firstChild?.nodeValue`
   - **Description:** Uses optional chaining to safely access the `nodeValue` of the first child node.
   - **Performance:** This method is the fastest among all tested options, achieving about 16.5 million executions per second.
   - **Pros:** 
     - Combines safety and high performance, making it the best choice when uncertain about DOM structure.
   - **Cons:**
     - Involves more complexity in accessing properties than using `textContent`.

### Special JavaScript Feature

- **Optional Chaining (`?.`):**
  - This feature provides a concise way to access properties or call methods on objects without needing to check explicitly for `null` or `undefined`. If the object before the `?.` is null or undefined, it simply returns `undefined` without throwing an error.
  - **Use Cases:** Optional chaining is especially valuable in cases where some properties may not exist, such as in deeply nested objects or when manipulating DOM elements where certain elements might not be present.

### Considerations & Alternatives

- **Alternatives to `textContent` and `nodeValue`:** 
  - Developers might consider using the `innerText` property instead of `textContent` when needing to retrieve visible text that respects CSS styling (e.g., not showing hidden text).
  - Also, using libraries for DOM manipulation like jQuery can abstract these raw access patterns but typically result in slower performance due to the added overhead. 
  - Frameworks like React efficiently manage and render changes to the DOM, which can also affect how these properties are accessed and their performance characteristics compared to vanilla JavaScript.

### Conclusion

This benchmark reveals important insights into the performance of different approaches to accessing textual content in JavaScript. Developers should choose methods not only based on performance but also consider safety (especially when working with dynamic DOM structures) and readability. While using `textContent` is simpler, using `nodeValue` with optional chaining proves to deliver the best balance between safety and performance in scenarios where DOM elements might be conditionally present.

Related benchmarks:

Reading textContent vs. nodeValue (incl. optional chaining) [FIXED] (version: 1)

Comparing performance of: Read textContent vs Read textContent (incl. optional chaining) vs Read nodeValue vs Read nodeValue (incl. optional chaining)

Created: 28 days ago by: Guest

Jump to the latest result

Read textContent

Read textContent (incl. optional chaining)

Read nodeValue

Read nodeValue (incl. optional chaining)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 27 days ago):