Benchmark: textcontent vs nodevalue vs content:after

Script Preparation code:

var newBody = document.createElement("div");


for (let i; i < 1000; i++) {
	var foo = document.createElement("div");
  	foo.innerText="abc";
	newBody.appendChild(foo);
}

Tests:

textcontent
var case1 = document.getElementsByTagName("div"); for (var i = 0; i < case1.length; i++) { case1[i].textcontent="ABC"; }
nodevalue
var case2 = document.getElementsByTagName("div"); for (var i = 0; i < case2.length; i++) { case2[i].nodevalue="ABC"; }
setAttribute
var case3 = document.getElementsByTagName("div"); for (var i = 0; i < case3.length; i++) { case3[i].setAttribute('data','ABC'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textcontent
nodevalue
setAttribute

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
textcontent	4801942.0 Ops/sec
nodevalue	4837433.5 Ops/sec
setAttribute	2221605.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case, where the performance of different approaches to access and modify HTML element attributes is compared. The benchmark tests three methods: `textContent`, `nodeValue`, and `setAttribute`.

**Options Compared**

1. **`textContent`**: This method uses the `textContent` property to set or get the text content of an element.
2. **`nodeValue`**: This method uses the `nodeValue` property to set or get the text value of an element's child nodes.
3. **`setAttribute`**: This method uses the `setAttribute` method to set a custom attribute on an element.

**Pros and Cons**

*   **`textContent`**:
    *   Pros: Simple, straightforward way to access and modify text content.
    *   Cons: May not be suitable for complex HTML structures or when you need fine-grained control over attributes.
*   **`nodeValue`**:
    *   Pros: Can be useful for accessing and modifying the text value of child nodes, especially when `textContent` is not available.
    *   Cons: May not work as expected with some HTML elements or in certain browsers.
*   **`setAttribute`**:
    *   Pros: Provides fine-grained control over custom attributes, allowing you to store and retrieve arbitrary data.
    *   Cons: Can be slower than the other two methods due to the overhead of setting a new attribute value.

**Library Usage**

None of the provided benchmark cases use any external libraries. However, it's worth noting that if you were to implement these approaches in a real-world application, you might need to consider using libraries like jQuery or DOM manipulation libraries specific to your needs.

**Special JS Features and Syntax**

There are no special JavaScript features or syntax used in this benchmark except for the use of `var` with `let`/`const` in some cases (not shown in the provided code). If you're familiar with modern JavaScript, you should be comfortable with the concepts presented here.

**Other Alternatives**

In addition to the methods tested by MeasureThat.net, other approaches might include:

*   **`innerHTML`**: This method sets or gets the HTML content of an element. However, it's generally less recommended due to potential security risks and performance implications.
*   **`outerHTML`**: Similar to `innerHTML`, but allows you to set the outer HTML (including the element itself) of an element.

Keep in mind that the choice of method depends on your specific use case, performance requirements, and desired behavior.

Related benchmarks:

textcontent vs nodevalue vs content:after (version: 0)

Comparing performance of: textcontent vs nodevalue vs setAttribute

Created: 2 years ago by: Registered User

Jump to the latest result

textcontent

nodevalue

setAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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