Benchmark: Get textContent, innerText, innerHTML, nodeValue

Script Preparation code:

var a = document.createElement('a');
document.body.appendChild(a);

Tests:

textContent
a.textContent
innerText
a.innerText
innerHTML
a.innerHTML
nodeValue
a.nodeValue

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
innerText
innerHTML
nodeValue

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 100 on Windows

View result in a separate tab

Test name	Executions per second
textContent	7052040.0 Ops/sec
innerText	747503.8 Ops/sec
innerHTML	8387512.5 Ops/sec
nodeValue	13550271.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The provided JSON represents a benchmark that tests the performance of four different methods to retrieve text content from an HTML element: `textContent`, `innerText`, `innerHTML`, and `nodeValue`. The script preparation code creates a new `<a>` element, which is appended to the document body. This allows us to focus on the retrieval methods without any additional overhead.

**Options Compared**

The benchmark compares the performance of four different methods:

1. `textContent`: Retrieves the text content of an element, excluding HTML and XML markup.
2. `innerText`: Similar to `textContent`, but includes HTML markup.
3. `innerHTML`: Retrieves the HTML content of an element, including all elements, attributes, and styles.
4. `nodeValue`: Retrieves only the text node value of an element.

**Pros and Cons**

Here's a brief summary of each method:

* **`textContent`**: Fastest method, as it only retrieves the text content without any additional overhead. However, it might not work correctly with HTML markup or attributes.
* **`innerText`**: Similar to `textContent`, but includes HTML markup. This can lead to slower performance due to the added complexity. However, it's still faster than `innerHTML`.
* **`innerHTML`**: Slowest method, as it retrieves all HTML content, including elements, attributes, and styles. This can lead to significant overhead and slower performance.
* **`nodeValue`**: Fast method that only retrieves the text node value of an element. However, its performance might vary depending on the specific use case.

**Library**

None of the methods rely on a specific JavaScript library. The `innerHTML` method is simply using the native DOM API to retrieve the HTML content.

**Special JS Feature or Syntax**

The benchmark does not utilize any special JavaScript features or syntax beyond what's required for basic DOM manipulation.

**Other Alternatives**

If you need to compare performance of other text retrieval methods, consider:

* Using `getPlainText()` (available in modern browsers) instead of `textContent` and `innerText`.
* Implementing a custom function to parse the HTML content and extract only the relevant text.
* Using a library like DOMPurify to sanitize the HTML content before retrieval.

Keep in mind that these alternatives might have different performance characteristics or requirements, so it's essential to test them thoroughly.

Related benchmarks:

Get textContent, innerText, innerHTML, nodeValue (version: 0)

Comparing performance of: textContent vs innerText vs innerHTML vs nodeValue

Created: 4 years ago by: Guest

Jump to the latest result

textContent

innerText

innerHTML

nodeValue

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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