Benchmark: createTextNode vs textContent vs innerText vs innerHTML (for reading)

Script Preparation code:

var a = document.createElement('a');
var v;

Tests:

textContent
v = a.textContent;
innerText
v = a.innerText;
innerHTML
v = a.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: one year 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	6152597.5 Ops/sec
innerText	5812785.0 Ops/sec
innerHTML	6952746.5 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 explain what's being tested.

**What is being tested?**

The benchmark measures the performance differences between four ways to read text content from an HTML element in JavaScript:

1. `textContent`
2. `innerText` (also known as `innerText`)
3. `innerHTML`

In other words, the benchmark compares how fast each of these methods can retrieve and return the text content of a given HTML element.

**Options compared:**

The four options being compared are:

* `textContent`: returns the text content of an element, without any markup (e.g., `<script>...</script>`).
* `innerText`: returns the text content of an element, including markup (e.g., `<script>...</script>`, `<span>...</span>`, etc.).
* `innerHTML`: returns the HTML content of an element, including all child elements and their attributes.
* A fourth option is implied, which we'll discuss later.

**Pros and Cons:**

Each method has its pros and cons:

* `textContent`:
	+ Pros: faster and more lightweight than other methods, as it doesn't include markup.
	+ Cons: may not return HTML content if the element contains other types of content (e.g., images).
* `innerText`:
	+ Pros: returns HTML content, making it suitable for displaying text with formatting.
	+ Cons: slower than `textContent`, and includes unnecessary markup.
* `innerHTML`:
	+ Pros: returns all HTML content, including child elements and attributes.
	+ Cons: slowest method, as it needs to parse and evaluate the entire HTML string.

**Other considerations:**

* When using `textContent`, if you want to include certain elements or attributes in the returned text, you may need to use additional methods (e.g., `querySelector()` or `getAttribute()`).
* If you're working with complex HTML content, using `innerHTML` might be more convenient, but it's also slower and more memory-intensive.

**Library usage:**

None of the tests appear to rely on a specific library. However, if we were to speculate, some libraries like jQuery or React might use similar methods (e.g., `jq()` for `textContent` or `reactDom` for `innerHTML`). But this is not explicitly stated in the benchmark.

**Special JavaScript feature/syntax:**

None of the tests appear to rely on special JavaScript features or syntax. However, if we consider modern JavaScript features like async/await or Promises, they might be used in the preparation code (e.g., creating an async function) but are not relevant to the performance comparison itself.

**Alternative methods:**

If you wanted to test other methods for reading text content from HTML elements, some alternatives could include:

* `getElementsByClassName()` or `querySelectorAll()` with a regex pattern to extract specific text content.
* Using `DOMParser` to parse an HTML string and extract text content.
* Implementing your own custom method using regular expressions or DOM manipulation.

Keep in mind that these alternative methods might not be as optimized or efficient as the ones tested in the benchmark.

Related benchmarks:

createTextNode vs textContent vs innerText vs innerHTML (for reading) (version: 0)

Comparing performance of: textContent vs innerText vs innerHTML

Created: 3 years ago by: Guest

Jump to the latest result

textContent

innerText

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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