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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
set textContent	7734113.0 Ops/sec
cached textContent prototype	4386265.0 Ops/sec
avoid remove the existing node and create a new one	3184937.0 Ops/sec

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: 11 months 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