Benchmark: textContent vs nodeValue vs data vs innerHTML

HTML Preparation code:

<div id="el"> </div>

Script Preparation code:

var a = document.querySelector('#el');

Tests:

element.textContent
a.textContent = Math.random();
node.textContent
a.firstChild.textContent = Math.random();
node.nodeValue
a.firstChild.nodeValue = Math.random();
node.data
a.firstChild.data = Math.random();
element.innerHtml
a.innerHTML = Math.random();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
element.textContent
node.textContent
node.nodeValue
node.data
element.innerHtml

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Mac OS X 10.15

View result in a separate tab

node.data

6.3M/s

node.nodeValue

6.2M/s

element.textContent

6.0M/s

node.textContent

5.9M/s

element.innerHtml

3.8M/s

View exact numbers

Test name	Executions per second
✓ node.data	6,253,989 Ops/sec
node.nodeValue	6,190,032 Ops/sec
element.textContent	5,952,776 Ops/sec
node.textContent	5,940,970 Ops/sec
element.innerHtml	3,776,731 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark test case that measures the performance of different string access methods in JavaScript.

The benchmark tests four different string access methods:

1. **textContent**: This method returns the text content of an element, excluding any HTML or XML markup.
2. **nodeValue**: This method returns the node value of an element, which is the actual text content of the element, including any HTML and XML markup.
3. **data**: This method returns the text data of an element, which is similar to nodeValue but can be overridden by the browser or a contenteditable attribute.
4. **innerHTML**: This method returns the inner HTML of an element, which includes the HTML and XML markup.

**Options Comparison**

The benchmark tests each string access method with a different approach:

* **textContent**, **nodeValue**, and **data** methods use the `Math.random()` function to generate a random value and then assign it to the corresponding property. This is done to test how quickly each method can set its return value.
* **innerHTML** method uses the `Math.random()` function to generate a random value and then assigns it to the element's inner HTML using the `a.innerHTML =` syntax.

**Pros and Cons**

Here are some pros and cons of each string access method:

1. **textContent**:
	* Pros: Fast, as it only returns the text content.
	* Cons: Does not account for HTML or XML markup.
2. **nodeValue**:
	* Pros: Returns the actual text content, including HTML and XML markup.
	* Cons: Can be slower than textContent due to the added complexity.
3. **data**:
	* Pros: Similar to nodeValue, but can be overridden by the browser or a contenteditable attribute.
	* Cons: Less widely supported than nodeValue.
4. **innerHTML**:
	* Pros: Returns the entire HTML and XML markup, which may be useful in certain scenarios.
	* Cons: Can be slower due to the added complexity of parsing HTML.

**Library and Purpose**

In this benchmark, no libraries are explicitly used. However, it's worth noting that some browsers may have built-in optimizations or quirks that affect the performance of string access methods.

**Special JS Feature or Syntax**

There is no special JS feature or syntax being tested in this benchmark. The focus is solely on the performance differences between various string access methods.

**Alternatives**

If you want to test other string access methods, you can consider using the following alternatives:

* **element.textContent2**: Some browsers have a `textContent2` property that returns the text content without any HTML or XML markup.
* **element.dataNodeValue**: Some browsers have a `dataNodeValue` property that returns the actual text content, including HTML and XML markup.

To use these alternatives, you would need to update the benchmark's Script Preparation Code to include the necessary properties. For example:

```javascript
var a = document.querySelector('#el');
a.textContent2 = Math.random();
```

Keep in mind that not all browsers support these alternative methods, so be sure to test on multiple platforms and versions to ensure compatibility.

textContent vs nodeValue vs data vs innerHTML (version: 0)

Comparing performance of: `element.textContent vs node.textContent vs node.nodeValue vs node.data vs element.innerHtml`

Created: 2 years ago by: Guest

Go to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

element.innerHtml

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

textContent vs nodeValue vs data vs innerHTML (version: 0)

Comparing performance of: element.textContent vs node.textContent vs node.nodeValue vs node.data vs element.innerHtml

Created: 2 years ago by: Guest

Go to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

element.innerHtml

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `element.textContent vs node.textContent vs node.nodeValue vs node.data vs element.innerHtml`