Run results for: set textContent vs update text node

Run details:

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

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 11 months ago

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

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

Run results for: set textContent vs update text node

set textContent

cached textContent prototype

avoid remove the existing node and create a new one