Benchmark: textContent vs nodeValue vs data vs innerHTML vs append vs dataWithCheck

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();
append
a.firstChild.remove(); a.appendChild(document.createTextNode(Math.random()));
dataWithCheck
if (a.firstChild instanceof Text) { a.firstChild.data = 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
append
dataWithCheck

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

node.textContent

2.1M/s

node.nodeValue

2.1M/s

node.data

2.0M/s

element.textContent

1.8M/s

dataWithCheck

1.5M/s

append

1.1M/s

element.innerHtml

1.0M/s

View exact numbers

Test name	Executions per second
✓ node.textContent	2,108,884 Ops/sec
node.nodeValue	2,074,619 Ops/sec
node.data	2,001,726 Ops/sec
element.textContent	1,779,554 Ops/sec
dataWithCheck	1,466,060 Ops/sec
append	1,065,845 Ops/sec
element.innerHtml	1,020,750 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmarking test created using MeasureThat.net. The benchmark measures the performance of various approaches for setting or updating text content, node values, and inner HTML of an HTML element.

**Options Compared**

The benchmark compares six different options:

1. `element.textContent`
2. `node.textContent`
3. `node.nodeValue`
4. `node.data` (with a check)
5. `append` (appending a new text node to the element)
6. `dataWithCheck` (setting data on a first child node with a check)

**Pros and Cons of Each Approach**

1. **element.textContent**
	* Pros: Simple, straightforward, and widely supported.
	* Cons: May involve additional DOM mutations, which can lead to performance issues in certain cases.
2. **node.textContent**
	* Pros: Similar to `element.textContent`, but more focused on the node itself, which might be beneficial for specific use cases.
	* Cons: Still involves setting text content directly on the element, which may not be optimal for all scenarios.
3. **node.nodeValue**
	* Pros: Sets the node's value property, which can be useful if you need to update other properties as well.
	* Cons: May require additional DOM mutations or checks, depending on the specific use case.
4. **node.data**
	* Pros: A modern approach that sets the `data` attribute, which is more efficient and flexible than setting text content directly.
	* Cons: Requires a first child node to exist (using `node.firstChild`) and may not be supported by older browsers.
5. **append**
	* Pros: Appends a new text node to the element, which can be beneficial for certain use cases where you need to build up text incrementally.
	* Cons: May involve additional DOM mutations, which can impact performance.
6. **dataWithCheck**
	* Pros: A variation of `node.data` that includes a check to ensure a first child node exists before setting its data attribute.
	* Cons: Requires the presence of a first child node and may not be supported by older browsers.

**Library Used**

The benchmark uses the `document.querySelector` method to select an HTML element with the ID `el`. This is a modern API that allows you to query the DOM using CSS selectors. The library used here is the W3C specification for `querySelector`.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark beyond what's typically available in modern browsers.

**Alternatives**

If you need more control over the text content or node updates, consider alternative approaches like:

* Using a library like `jsdom` to simulate a full DOM environment.
* Implementing custom text content update logic using native JavaScript APIs (e.g., `Text` nodes).
* Utilizing browser-specific APIs, such as `WebAssembly` or `WebGL`, for more efficient computations.

However, keep in mind that these alternatives may require additional setup and expertise.

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

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

Created: 2 years ago by: Guest

Go to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

element.innerHtml

append

dataWithCheck

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 vs append vs dataWithCheck (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

element.innerHtml

append

dataWithCheck

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 vs append vs dataWithCheck`