Benchmark: innerText vs textContent reading speed

HTML Preparation code:

<dd class="body-small text-color-text-low-emphasis">
    Mumbai, Maharashtra, India
    <span aria-hidden="true"></span>
    <span>
        500+ connections
    </span>
</dd>

Tests:

innerText
let i = 1000; const el = document.querySelector("dd"); while (i--) { console.log(el.innerText) }
textContent
let i = 1000; const el = document.querySelector("dd"); while (i--) { console.log(el.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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare the reading speed of two DOM properties: `innerText` and `textContent`. These properties are used to retrieve the text content of an HTML element, but they differ in how they handle certain cases.

* `innerText`: This property returns the text content of an element without any extra formatting or styling information. It's specifically designed for accessibility purposes.
* `textContent`: This property also returns the text content of an element, but it includes any extra formatting or styling information that's not present in the `innerText` version.

**Options Compared**

The benchmark is comparing the two options:

1. `innerText`
2. `textContent`

These options are compared to determine which one is faster for reading text content from an HTML element.

**Pros and Cons of Each Approach**

* **innerText**: This approach is likely to be faster because it doesn't include any extra formatting or styling information, which can reduce the amount of data that needs to be processed.
* **textContent**: This approach includes all the formatting and styling information, which may make it slower for reading text content from an element.

However, `textContent` is more flexible and allows for better handling of HTML elements with complex structures. It's also generally considered a safer choice when working with HTML elements, as it can help prevent XSS attacks by removing potentially malicious JavaScript code from the text content.

**Other Considerations**

* **DOM Traversal**: The benchmark uses `document.querySelector` to select an element on the page and then traverses the DOM using a `while` loop. This approach may introduce unnecessary overhead due to the repeated DOM queries.
* **JavaScript Engine Optimizations**: The JavaScript engine optimizations, such as caching and inlining, can affect the performance of the benchmark.

**Library and Special JS Features**

There is no specific library mentioned in the benchmark definition or test cases. However, the use of `document.querySelector` suggests that the benchmark is using the DOM API to interact with HTML elements.

No special JavaScript features or syntax are being used in this benchmark.

**Alternatives**

If you're interested in running this benchmark on your own machine, here's an alternative way to set it up:

1. Create a new HTML file and copy the `Html Preparation Code` into it.
2. Write a simple JavaScript script using Node.js that runs the two benchmark test cases.
3. Use a library like `benchmark` or `micro-benchmark` to run the benchmarks and collect results.

Here's an example code snippet:
```javascript
const fs = require('fs');
const path = require('path');

// Load HTML file
const htmlFile = path.join(__dirname, 'index.html');
const htmlContent = fs.readFileSync(htmlFile, 'utf8');

// Define benchmark test cases
function benchmarkInnerText() {
  const el = document.querySelector('dd');
  let i = 1000;
  while (i--) {
    console.log(el.innerText);
  }
}

function benchmarkTextContent() {
  const el = document.querySelector('dd');
  let i = 1000;
  while (i--) {
    console.log(el.textContent);
  }
}

// Run benchmarks
benchmarkInnerText();
benchmarkTextContent();
```
Note that this code snippet assumes you have Node.js installed and the `benchmark` library available. You can install it using npm by running `npm install benchmark`.

Related benchmarks:

innerText vs textContent reading speed (version: 0)

blah blah

Comparing performance of: innerText vs textContent

Created: 2 years ago by: Guest

Jump to the latest result

innerText

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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