Benchmark: textContent vs nodeValue vs data vs innerHTML vs append

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()));

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Linux

View result in a separate tab

Test name	Executions per second
element.textContent	257804.9 Ops/sec
node.textContent	1519529.6 Ops/sec
node.nodeValue	1511018.1 Ops/sec
node.data	1565484.1 Ops/sec
element.innerHtml	256242.7 Ops/sec
append	210919.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases, explaining what's being tested, the pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark is defined as follows:

* The script preparation code is: `var a = document.querySelector('#el');`
* The HTML preparation code is: `<div id="el"></div>`

In summary, this benchmark creates an HTML element with the ID "el" and assigns it to a variable named `a`. This setup allows for testing different aspects of the element.

**Individual Test Cases**

The benchmark consists of six test cases:

1. **element.textContent**: Assigns a random value to the text content of the element.
2. **node.textContent**: Assigns a random value to the first child node's text content, which in this case is also the text content of the `a` element.
3. **node.nodeValue**: Assigns a random value to the data attribute (nodeValue) of the first child node.
4. **node.data**: Assigns a random value to the data attribute (nodeValue) of the element itself.
5. **element.innerHTML**: Sets the inner HTML of the element to a random value.
6. **append**: Removes the first child node and appends a new text node with a random value.

**What's being tested?**

These test cases are designed to measure the performance of different aspects of DOM manipulation in JavaScript:

* Setting and getting text content using `textContent` and `node.textContent`
* Setting and getting data attributes (`nodeValue`) using `node.nodeValue` and `node.data`
* Setting inner HTML
* Appending nodes

**Pros and Cons**

Here's a brief analysis of each approach:

1. **element.textContent**: This is likely the fastest option since it directly sets the text content attribute, which is optimized for performance.
2. **node.textContent**: This is slower because it involves traversing the DOM tree to access the child node's `textContent` property.
3. **node.nodeValue**: This is faster than accessing `nodeValue` of a child node because it doesn't require traversing the DOM tree.
4. **node.data**: This is similar to `nodeValue`, but since it refers to the element's own data attribute, it may be slightly slower due to additional overhead.
5. **element.innerHTML**: Setting inner HTML can be slow if the value is large or complex, as it requires parsing and formatting the HTML content.
6. **append**: Removing a child node and appending a new one can be slow because it involves creating a new DOM node, removing the old one, and updating the parent's child list.

**Other Considerations**

* The benchmark uses `Math.random()` to generate random values, which may not accurately reflect real-world use cases.
* The test cases don't account for edge cases like empty strings or null values.
* The benchmark doesn't measure performance for different types of DOM nodes (e.g., text nodes, comment nodes).
* There's no consideration for parsing and formatting large HTML content.

**Alternatives**

If you're interested in exploring alternative benchmarks, here are a few ideas:

1. Test the performance of different DOM traversal methods, such as `querySelector`, `querySelectorAll`, or `getElementsByTagName`.
2. Compare the performance of different string manipulation methods, like `concat()` vs. `+` vs. template literals.
3. Benchmark the performance of JavaScript engines and browsers with varying degrees of optimization and caching.

Keep in mind that these alternative benchmarks would require significant modifications to the existing code and may not provide comparable results due to differences in execution environments and test cases.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

element.textContent

node.textContent

node.nodeValue

node.data

element.innerHtml

append

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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