Benchmark: set textContent vs update text node

HTML Preparation code:

<html>

<body>
    <div id='test'>Hello, World</div>
</body>

</html>

Script Preparation code:

var parent = document.getElementById('test');

var setTextContent1 = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent').set;
var setTextContent2 = (node, text) => {
  if (text) {
    const firstChild = node.firstChild;
    if (
      firstChild &&
      firstChild === node.lastChild &&
      firstChild.nodeType === 3 /** TEXT_NODE */
    ) {
      firstChild.nodeValue = text;
      return;
    }
  }
  node.textContent = text;
}

Tests:

set textContent
parent.textContent = 'Hello, Sukka';
cached textContent prototype
setTextContent1.call(parent, 'Hello, Million');
avoid remove the existing node and create a new one
setTextContent2(parent, 'Hello, Performance');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
set textContent
cached textContent prototype
avoid remove the existing node and create a new one

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Linux

View result in a separate tab

Test name	Executions per second
set textContent	5388247.5 Ops/sec
cached textContent prototype	3767642.5 Ops/sec
avoid remove the existing node and create a new one	1926092.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two approaches to update the text content of an HTML element: setting `textContent` directly on the element, using a cached version of the property's setter function, and avoiding removing the existing node and creating a new one.

**Script Preparation Code**

The script preparation code defines the following variables:

* `parent`: an HTML element with the id "test"
* `setTextContent1`: a reference to the cached version of the `textContent` property's setter function
* `setTextContent2`: a custom function that updates the node's text content by checking if the existing child node is a TEXT_NODE and updating its value accordingly

**Html Preparation Code**

The HTML preparation code defines an HTML document with a single `<div>` element having the id "test" containing the text "Hello, World".

**Individual Test Cases**

There are three test cases:

1. **set textContent**: Sets the `textContent` property of the parent element directly.
2. **cached textContent prototype**: Uses the cached version of the `textContent` property's setter function to update the node's content.
3. **avoid remove the existing node and create a new one**: Avoids removing the existing node and creating a new one by using the custom `setTextContent2` function.

**Options Compared**

The benchmark compares three different approaches:

* Directly setting `textContent` on the element (`set textContent`)
* Using a cached version of the property's setter function (`cached textContent prototype`)
* Avoiding removing the existing node and creating a new one (`avoid remove the existing node and create a new one`)

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Directly setting `textContent` on the element**
	* Pros: Simple and efficient
	* Cons: May not be as efficient as using a cached version or avoiding node removal
2. **Using a cached version of the property's setter function**
	* Pros: Caches the property's value, reducing the number of DOM updates
	* Cons: May increase memory usage if not properly cleared
3. **Avoiding removing the existing node and creating a new one**
	* Pros: Can be more efficient than directly setting `textContent` or using a cached version
	* Cons: Requires modifying the custom function to check for TEXT_NODE nodes

**Library Usage**

None of the test cases use any external libraries.

**Special JS Features or Syntax**

The benchmark uses some special JavaScript features:

* `Object.getOwnPropertyDescriptor`: used to get the property descriptor of the `textContent` property.
* `Node.prototype.textContent`: used to access the `textContent` property on the Node prototype.
* `Array.prototype.call`: used to call the `setTextContent1` function with the parent element as the context.

Note that these special features are not explicitly mentioned in the benchmark, but they can be inferred from the code.

**Other Alternatives**

If you're looking for alternative approaches or optimizations, here are a few suggestions:

* Using `HTMLElement.textContent = text;` instead of `node.textContent = text;` could potentially provide better performance.
* Implementing a custom caching mechanism for the property's value could further optimize the `cached textContent prototype` approach.
* Investigating the use of Web Workers or parallel processing to execute the benchmark tests concurrently could also lead to improved performance.

Related benchmarks:

set textContent vs update text node (version: 0)

Comparing performance of: set textContent vs cached textContent prototype vs avoid remove the existing node and create a new one

Created: 2 years ago by: Guest

Jump to the latest result

set textContent

cached textContent prototype

avoid remove the existing node and create a new one

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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