Benchmark: innerText vs textContent reading

HTML Preparation code:

<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello' style="visibility: hidden;">Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>
<div id='hello'>Hello, World!</div>

Tests:

innerText
document.documentElement.innerText
textContent
document.documentElement.textContent

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
textContent

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Linux

View result in a separate tab

Test name	Executions per second
innerText	95959.7 Ops/sec
textContent	151629.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition, test cases, and latest benchmark results.

**Benchmark Definition:**
The benchmark measures the performance difference between two JavaScript functions:

1. `document.documentElement.innerText`
2. `document.documentElement.textContent`

These two properties are used to retrieve the text content of an HTML element.

**Script Preparation Code:** None

**Html Preparation Code:**
A large number of identical HTML elements (`<div id='hello'>`) are created, totaling 32 elements. Some of these elements have their visibility set to `hidden` using the `style` attribute.

**Individual Test Cases:**

1. **innerText**: Measures the performance of the `document.documentElement.innerText` function.
2. **textContent**: Measures the performance of the `document.documentElement.textContent` function.

**Latest Benchmark Results:**
Two results are provided for each test case:

1. **textContent**:
	* Browser: Chrome 128
	* Device Platform: Desktop
	* Operating System: Linux
	* Executions Per Second (FPS): 151629.640625
2. **innerText**:
	* Browser: Chrome 128
	* Device Platform: Desktop
	* Operating System: Linux
	* Executions Per Second (FPS): 95959.7265625

**Options Compared:**
The benchmark compares the performance of two approaches:

1. `innerText`
2. `textContent`

**Pros and Cons of Each Approach:**

1. **innerText**:
	* Pros: Simple and fast, as it only involves reading a single property.
	* Cons: May not accurately reflect the text content, as it does not consider the element's text node children.
2. **textContent**:
	* Pros: More accurate representation of the text content, as it considers all text nodes within the element.
	* Cons: Slower and more complex, due to the need to traverse the DOM tree.

**Other Considerations:**

1. The benchmark uses a large number of identical HTML elements to minimize any potential effects of the element structure on performance.
2. The use of `visibility: hidden` for some elements introduces an additional consideration, as it may affect how the browser handles text node rendering and layout.
3. The benchmark does not account for other factors that could impact performance, such as caching, memoization, or optimization techniques.

**Alternatives:**
If you want to explore alternative approaches, consider the following:

1. **DOM Traversal:** Instead of using `innerText` or `textContent`, implement a custom function that traverses the DOM tree and accumulates the text content.
2. **Text Node Manipulation:** Create a separate benchmark for manipulating individual text nodes, such as concatenating strings or inserting new text nodes.

Keep in mind that these alternatives may introduce additional complexity and overhead, but can provide more accurate insights into the performance characteristics of your application.

Related benchmarks:

innerText vs textContent reading (version: 0)

Comparing performance of: innerText vs textContent

Created: one year ago by: Registered User

Jump to the latest result

innerText

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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