Benchmark: nodeValue vs textContent 7

Script Preparation code:

var A = document.createElement("p");
var B = document.createElement("p");
var C = document.createElement("p");
var D = document.createElement("p");

Tests:

nodeValue A
A.nodeValue = "A";
textContent B
B.textContent = "B";
nodeValue C
C.nodeValue = "C";
textContent D
D.textContent = "D";

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

nodeValue A

506K/s

textContent B

494K/s

nodeValue C

492K/s

textContent D

481K/s

View exact numbers

✓ nodeValue A: 506,188 ops/sec
• textContent B: 494,084 ops/sec
• nodeValue C: 492,342 ops/sec
• textContent D: 481,426 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
nodeValue A
textContent B
nodeValue C
textContent D

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

Browser/OS: Chrome 124 on Windows

View result in a separate tab

nodeValue A

6.0M/s

nodeValue C

6.0M/s

textContent B

4.3M/s

textContent D

4.3M/s

View exact numbers

Test name	Executions per second
✓ nodeValue A	6,041,683 Ops/sec
nodeValue C	6,035,223 Ops/sec
textContent B	4,329,582 Ops/sec
textContent D	4,310,644 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.

**Benchmark Overview**

The test compares two approaches to set the text content of HTML elements: `nodeValue` (specifically, setting the innerHTML property) versus `textContent` (setting the textContent property). The benchmark is run on a desktop browser using Chrome 124.

**Script Preparation Code**

The script preparation code creates four identical HTML elements (`A`, `B`, `C`, and `D`) using `document.createElement("p")`. This ensures that all elements have the same starting state, allowing for a fair comparison of the two approaches.

**Html Preparation Code**

There is no HTML preparation code provided, which means the benchmark assumes that the HTML elements will be created in an existing document. If this were not the case, additional setup would be required to populate the elements with content.

**Test Cases**

The test cases are individual benchmarks that compare the performance of each approach:

1. `nodeValue A`: Sets the innerHTML property (`nodeValue`) of element `A`.
2. `textContent B`: Sets the textContent property (`textContent`) of element `B`.
3. `nodeValue C`: Sets the innerHTML property (`nodeValue`) of element `C`.
4. `textContent D`: Sets the textContent property (`textContent`) of element `D`.

**Libraries and Special Features**

* None of the test cases use a specific JavaScript library.
* No special JS features or syntax are used in these benchmarks.

**Approach Comparison**

The two approaches being compared are:

1. **nodeValue**: Setting the innerHTML property to set the text content of an element. This approach is specific to Internet Explorer and Safari, as it sets the innerHTML property directly.
2. **textContent**: Setting the textContent property to set the text content of an element. This approach is supported by most modern browsers, including Chrome, Firefox, and Edge.

**Pros and Cons**

* **nodeValue**:
	+ Pros: Simple and well-supported in Safari and Internet Explorer.
	+ Cons: Less efficient than `textContent` due to its use of innerHTML, which creates a new DOM element and updates it with the content.
* **textContent**:
	+ Pros: More efficient than `nodeValue`, as it uses an optimized text node creation process.
	+ Cons: Less supported in older browsers like Internet Explorer.

**Other Alternatives**

If you're looking for alternatives to these approaches, consider using:

1. `innerHTML`: Similar to `nodeValue`, but also updates the element's HTML structure. Not recommended due to its inefficiencies and potential DOM manipulation issues.
2. `replaceChild` and `appendChild`: Alternative methods that create new nodes and append or replace existing ones. These can be more efficient than `textContent` in certain cases.

Keep in mind that the choice of approach depends on your specific use case, browser support requirements, and performance considerations.

nodeValue vs textContent 7 (version: 0)

Comparing performance of: `nodeValue A vs textContent B vs nodeValue C vs textContent D`

Created: 2 years ago by: Guest

Go to the latest result

nodeValue A

textContent B

nodeValue C

textContent D

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

nodeValue vs textContent 7 (version: 0)

Comparing performance of: nodeValue A vs textContent B vs nodeValue C vs textContent D

Created: 2 years ago by: Guest

Go to the latest result

nodeValue A

textContent B

nodeValue C

textContent D

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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: `nodeValue A vs textContent B vs nodeValue C vs textContent D`