Benchmark: textContent(replace) vs nodeValue(replace) vs classList

Script Preparation code:

for (let i=0;i<1000;i++){
	let foo = document.createElement("div");  
	foo.innerText="abc";
	document.body.append(foo);                 
}

Tests:

textContent
let foo = document.getElementsByTagName("div"); for (let i=0;i<1000;i++){ foo[i].textContent=foo[i].textContent; }
nodeValue
let foo = document.getElementsByTagName("div"); for (let i=0;i<1000;i++){ foo[i].firstChild.nodeValue=foo[i].firstChild.nodeValue; }
classList
let foo = document.getElementsByTagName("div"); for (let i=0;i<1000;i++){ foo[i].classList.add("classList"); }

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

textContent

2K/s

nodeValue

2K/s

Fastest: textContent (1.2x faster)

View exact numbers

✓ textContent: 2,161 ops/sec
• nodeValue: 1,783 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
nodeValue
classList

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/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Windows

View result in a separate tab

textContent

3K/s

classList

1K/s

nodeValue

0/s

View exact numbers

Test name	Executions per second
✓ textContent	3,133 Ops/sec
classList	1,235 Ops/sec
nodeValue	0 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 provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark measures the performance of three different approaches to modify element attributes in JavaScript:

1. `textContent(replace)`: This approach uses the `textContent` property to replace the text content of an element.
2. `nodeValue(replace)`: This approach uses the `nodeValue` property to replace the node value of an element's first child (in this case, a `div` element).
3. `classList`: This approach uses the `classList` property to add a class to an element.

**Pros and Cons**

* `textContent(replace)`:
	+ Pros: Efficient use of the `textContent` property, which is optimized for text content updates.
	+ Cons: May not be suitable for elements with multiple child nodes or complex DOM structures.
* `nodeValue(replace)`:
	+ Pros: Suitable for elements with a single child node (like in this case), as it directly accesses that node's value.
	+ Cons: May not be efficient for elements with multiple child nodes, and the `nodeValue` property may have additional overhead due to its use in older browsers.
* `classList`:
	+ Pros: Suitable for adding classes to elements without modifying their text content or node values.
	+ Cons: May have performance implications if many classes are added or removed frequently.

**Library and Purpose**

None of the test cases explicitly use a library. However, it's worth noting that the `classList` property is supported by modern browsers as part of the CSSOM (CSS Object Model), which allows for efficient class management without modifying text content or node values.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in these test cases, other than the use of template literals (`\r\n\t`) and basic arithmetic operations.

textContent(replace) vs nodeValue(replace) vs classList (version: 5) Benchmark.js

Comparing performance of: `textContent vs nodeValue vs classList`

Created: 2 years ago by: Registered User

Go to the latest result

textContent

nodeValue

classList

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

textContent(replace) vs nodeValue(replace) vs classList (version: 5) Benchmark.js

Comparing performance of: textContent vs nodeValue vs classList

Created: 2 years ago by: Registered User

Go to the latest result

textContent

nodeValue

classList

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

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: `textContent vs nodeValue vs classList`