Benchmark: innerHTML vs innerText vs textContent Retrieval

HTML Preparation code:

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

Script Preparation code:

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

Tests:

innerText
let i = 1000; let el = document.querySelector("#hello"); while (i--) { let text = el.innerText; }
innerHtml
let i = 1000; let el = document.querySelector("#hello"); while (i--) { let text = el.innerHTML; }
textContent
let i = 1000; let el = document.querySelector("#hello"); while (i--) { let text = el.textContent; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerText
innerHtml
textContent

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0

Browser/OS: Firefox 129 on Windows

View result in a separate tab

Test name	Executions per second
innerText	8784.5 Ops/sec
innerHtml	1930392.4 Ops/sec
textContent	1936039.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that tests the performance of three different ways to retrieve text content from an HTML element: `innerHTML`, `innerText`, and `textContent`. The benchmark uses the `document.querySelector` method to select an HTML element with the id "hello" and then retrieves the text content using each of these methods.

**Options compared**

The benchmark compares the execution time of the following three options:

1. **`innerHTML`**: This option returns the HTML content of the element, including tags and attributes.
2. **`innerText`**: This option returns only the text content of the element, without tags or attributes.
3. **`textContent`**: This option returns both the text content and the text within `<script>` and `<style>` elements.

**Pros and Cons**

Here are some pros and cons for each option:

* **`innerHTML`**:
	+ Pros: Returns all relevant information about the element's HTML structure.
	+ Cons: Can be slow and inefficient, as it involves parsing the entire HTML document.
* **`innerText`**:
	+ Pros: Faster than `innerHTML`, as it only needs to retrieve the text content.
	+ Cons: May not work correctly for elements with complex structures or nested tags.
* **`textContent`**:
	+ Pros: Returns both text content and relevant information about the element's structure, making it a good compromise between speed and accuracy.
	+ Cons: Can be slower than `innerText`, as it needs to parse more HTML.

**Library usage**

None of the test cases use any external libraries or frameworks. The benchmark only relies on native JavaScript functionality.

**Special JS features or syntax**

The benchmark uses some special JavaScript features, such as:

* **`while` loops**: Used to iterate over a large number of iterations (1000) for each test case.
* **`document.querySelector`**: Used to select the HTML element with the id "hello".
* **`let` and `const` declarations**: Used to declare variables and avoid polluting the global namespace.

However, these features are not specific to any particular JavaScript version or syntax. They are standard features that have been part of JavaScript for a long time.

**Other alternatives**

If you want to improve this benchmark, here are some alternative options you could consider:

* Use a more advanced benchmarking library like `benchmark.js` or `micro-benchmark`.
* Add more test cases to cover different scenarios and edge cases.
* Use a different measurement unit, such as milliseconds or nanoseconds, instead of seconds.
* Consider using a more robust testing framework like Jest or Mocha.
* Use parallel execution to run multiple test cases concurrently, which can speed up the benchmarking process.

Keep in mind that these alternatives may require additional setup and configuration, but they can provide more accurate and reliable results.

Related benchmarks:

innerHTML vs innerText vs textContent Retrieval (version: 0)

Comparing performance of: innerText vs innerHtml vs textContent

Created: 2 years ago by: Guest

Jump to the latest result

innerText

innerHtml

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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