Run results for: set textContent vs update text node

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser: Chrome 130

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

set textContent

5.4M/s

cached textContent prototype

3.8M/s

avoid remove the existing node and create a new one

1.9M/s

View exact numbers

Test name	Executions per second
✓ set textContent	5,388,248 Ops/sec
cached textContent prototype	3,767,642 Ops/sec
avoid remove the existing node and create a new one	1,926,092 Ops/sec

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