Run results for: set textContent vs update text node vs cached prototype

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/113.0

Browser: Firefox 113

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

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

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

Run results for: set textContent vs update text node vs cached prototype

set textContent

cached textContent prototype

avoid remove the existing node and create a new one