Benchmark: set textContent vs update text node vs cached prototype

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 nodeFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, 'firstChild').get;
var nodeLastChild = Object.getOwnPropertyDescriptor(Node.prototype, 'lastChild').get;
var setTextContent2 = (node, text) => {
  if (text) {
    const firstChild = nodeFirstChild.call(node);
    if (
      firstChild && firstChild.nodeType === 3 /** TEXT_NODE */ && firstChild === nodeLastChild.call(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 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/113.0

Browser/OS: Firefox 113 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
set textContent	257065.0 Ops/sec
cached textContent prototype	298750.3 Ops/sec
avoid remove the existing node and create a new one	3603459.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmarking test suite created on the MeasureThat.net website. The benchmark tests three different approaches to set the text content of an HTML element.

**Approaches compared:**

1. **set textContent**: This approach uses the built-in `textContent` property of the HTML element to set its text content.
2. **cached textContent prototype**: This approach uses a cached version of the `textContent` property by calling the getter method (`get`) on the `Node.prototype` object and storing it in a variable. Then, when setting the text content, it calls this cached function instead of directly accessing the `textContent` property.
3. **avoid remove the existing node and create a new one**: This approach avoids removing the existing node and creating a new one by using a custom function (`setTextContent2`) that checks if the existing child node is still present before updating its value.

**Pros and Cons:**

1. **set textContent**:
	* Pros: Simple, widely supported, and efficient.
	* Cons: May not be optimized for performance, especially in cases where the element has a large number of child nodes or is deeply nested.
2. **cached textContent prototype**:
	* Pros: Can provide better performance by avoiding unnecessary DOM manipulations.
	* Cons: Requires careful management to avoid cache pollution and may not work in all scenarios (e.g., when the `textContent` property is used in a custom way).
3. **avoid remove the existing node and create a new one**:
	* Pros: Can provide better performance by avoiding unnecessary DOM manipulations, but it requires more complex logic.
	* Cons: May be slower than the other two approaches due to the additional checks.

**Library/Custom Function:**

The `setTextContent2` function uses a custom implementation that checks if the existing child node is still present before updating its value. It's essential to note that this approach may not work in all scenarios, especially when dealing with complex DOM structures or edge cases.

**JavaScript feature/Syntax:**

There are no special JavaScript features or syntax used in these approaches. They rely on standard ECMAScript and DOM APIs.

**Other alternatives:**

If you need more control over the text content setting process, you could consider using other approaches, such as:

* Using a library like jQuery to simplify DOM manipulation.
* Implementing your own custom text content setter function that takes into account specific requirements or constraints.
* Using a more advanced JavaScript framework or library that provides optimized text content setting functionality.

Keep in mind that the best approach will depend on the specific use case and performance requirements. MeasureThat.net's benchmark results can provide valuable insights to help you choose the most suitable method for your application.

Related benchmarks:

set textContent vs update text node vs cached prototype (version: 0)

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

Created: one year 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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