Benchmark: Reading textContent vs innerText vs innerHTML

HTML Preparation code:

<div id='hello'>Hello, World!</div>

Script Preparation code:

let el = document.querySelector("#hello");

Tests:

textContent
let i = 1000, tmp = ''; while (i--) tmp = el.textContent;
innerText
let i = 1000, tmp = ''; while (i--) tmp = el.innerText;
innerHTML
let i = 1000, tmp = ''; while (i--) tmp = el.innerHTML;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
innerText
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
textContent	14262.8 Ops/sec
innerText	1191.0 Ops/sec
innerHTML	12293.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you're analyzing focuses on evaluating the performance of three different approaches for retrieving text from a DOM element in JavaScript: `textContent`, `innerText`, and `innerHTML`. Each of these methods has its own use cases, pros, and cons, which are revealed in the benchmark results.

### Test Options

1. **textContent**
    - **Description**: This property returns the text content of a node and its descendants. It does not include any HTML tags or formatting.
    - **Performance**: In the benchmark results, `textContent` achieved 14,262.76 executions per second, making it the fastest option.
    - **Pros**:
        - Fastest performance among the three.
        - Directly retrieves the text without parsing HTML.
        - Ideal for extracting or manipulating only text.
    - **Cons**:
        - Ignores any HTML tags, which means you lose formatting and other elements like images or links.

2. **innerText**
    - **Description**: Returns the visible text contained within a node. It takes CSS styles into account, meaning that hidden text (e.g., set with `display: none`) will not be returned.
    - **Performance**: It performed the slowest, averaging 1,191.04 executions per second.
    - **Pros**:
        - Takes into account the visual representation of the text, making it useful for retrieving only what's actually rendered on the screen.
        - Can be useful for content that is dynamically styled or conditionally rendered.
    - **Cons**:
        - Significantly slower than `textContent` and `innerHTML`.
        - Performance can be affected by complex layouts due to the need to compute styles and layouts.

3. **innerHTML**
    - **Description**: This property returns the HTML content (including tags) of an element, allowing retrieval of how the content is structured.
    - **Performance**: `innerHTML` reached 12,293.13 executions per second.
    - **Pros**:
        - Useful for getting the full HTML structure of an element.
        - Enables extraction of both text and underlying HTML tags.
    - **Cons**:
        - Not as fast as `textContent` and more prone to performance hits especially with a more complex DOM structure.
        - May expose potential security risks, such as cross-site scripting (XSS), if handling user-generated content.

### Comparison Summary

- **Performance**: The `textContent` method significantly outperforms both `innerText` and `innerHTML` in terms of execution speed.
- **Use Cases**: Use `textContent` for raw text; `innerText` for UI-driven text, and `innerHTML` when you need structure with HTML tags.
- **Considerations**: If performance is a critical requirement and the retrieval of HTML structure is not necessary, `textContent` is preferable. If text needs to reflect what is visible on the screen (taking CSS into account), then `innerText` is the best choice despite its slower performance. For cases where the HTML structure is needed, `innerHTML` is the go-to, but it is also slower and has potential security implications if content is not sanitized properly.

### Alternatives

- **Creating Custom Functions or Libraries**: Developers may create utility functions that optimize these methods based on specific use cases, enabling batch retrievals or caching strategies that can enhance performance.
- **Performance Techniques**: Utilize document fragments or temporary containers to manipulate and retrieve large sets of content before applying changes to the DOM to avoid reflows and repaints.
- **Use of Frameworks**: Libraries like React, Vue, or Angular manage DOM interactions more efficiently, abstracting these decisions and helping optimize rendering.

This comparison not only highlights the performance characteristics of these properties but also informs developers about their appropriate contexts, enhancing decision-making when manipulating the DOM in web applications.

Related benchmarks:

Reading textContent vs innerText vs innerHTML (version: 1)

Comparing performance of: textContent vs innerText vs innerHTML

Created: 27 days ago by: Guest

Jump to the latest result

textContent

innerText

innerHTML

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