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

ⓘ 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; 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	3603460.0 Ops/sec

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