Benchmark: innerText vs textContent + trim

Script Preparation code:

var a = document.createElement('a');
a.textContent = "Text";

Tests:

textContent
a.textContent.trim();
innerText
a.innerText;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
innerText

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 146 on Android

View result in a separate tab

Test name	Executions per second
textContent	1775137.9 Ops/sec
innerText	1707230.8 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 benchmark and its components to understand what's being tested.

**Benchmark Definition**

The provided JSON defines two individual test cases, each representing a different approach to retrieving text content from an HTML element: `textContent` and `innerText`.

In JavaScript, these two properties are often confused with each other. The main difference lies in how they handle whitespace and text normalization.

*   **textContent**: This property returns the raw content of an element without any whitespace normalization or text trimming. It preserves all whitespace characters, including spaces, tabs, and line breaks.
*   **innerText**: This property is similar to `textContent` but with some differences. According to the specification (ECMAScript 2015), `innerText` is supposed to return the content of an element without any whitespace normalization. However, some browsers may still apply basic text trimming or normalize whitespace.

**Options Compared**

The benchmark compares two approaches:

1.  **textContent**: This approach preserves all whitespace characters.
2.  **textContent + trim**: While not explicitly using `innerText`, this approach applies a common technique to remove leading and trailing whitespace from the result, making it more comparable to how `innerText` works in some browsers.

**Pros and Cons**

Here are the pros and cons of each approach:

*   **textContent**:
    *   Pros: Preserves all whitespace characters, can be useful for precise text comparison.
    *   Cons: May lead to less efficient execution times due to unnecessary whitespace handling.
*   **textContent + trim**:
    *   Pros: More closely mimics how `innerText` works in some browsers and can provide more accurate results.
    *   Cons: Applies additional processing, potentially affecting performance.

**Library Considerations**

There is no explicit library mentioned in the benchmark definition. However, it's essential to note that the behavior of `textContent` and `innerText` may vary across different JavaScript engines, browsers, or environments.

Some libraries, like jQuery, might provide alternatives for these properties. For instance, jQuery offers `.text()` which returns the content of an element without any whitespace normalization, similar to `textContent`. However, this is not directly related to the benchmark being discussed.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax mentioned in the benchmark definition. The focus is solely on comparing two different approaches for retrieving text content from HTML elements.

**Other Alternatives**

If you're interested in exploring other alternatives for text content retrieval, consider the following:

*   **innerHTML**: This property returns the HTML code of an element and can be more efficient than `textContent` or `innerText`, but it also includes markup tags and may not accurately represent just the text content.
*   **outerHTML**: Similar to `innerHTML`, this property returns the HTML code, including tags. However, unlike `innerHTML`, it does not remove the tags when set.

When working with text content in JavaScript, choose the approach that best suits your specific requirements, considering factors like performance, accuracy, and the complexity of the application.

Related benchmarks:

innerText vs textContent + trim (version: 0)

Comparing performance of: textContent vs innerText

Created: 4 years ago by: Guest

Jump to the latest result

textContent

innerText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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