Run results for: replace content

Run details:

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

Browser: Chrome 96

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
replaceChildren	575770.1 Ops/sec
remove and insert	813194.6 Ops/sec
remove and replace	421765.0 Ops/sec

HTML Preparation code:

<div id="container1"></div>
<div id="container2"></div>

Script Preparation code:

const container1 = document.querySelector('#container1');
const container2 = document.querySelector('#container2');
for (let i=0; i<300; i++) {
  container1.appendChild(document.createElement('p'));
  container2.appendChild(document.createElement('p'));
}

Tests:

replaceChildren
container1.replaceChildren(...container2.children);
remove and insert
while (container1.firstChild) container1.removeChild(container1.firstChild); while (container2.firstChild) container1.appendChild(container2.firstChild);
remove and replace
while (container1.firstChild) container1.removeChild(container1.firstChild); container1.replaceChildren(...container2.children);

Run results for: replace content

Howto clear Element Content

replaceChildren

remove and insert

remove and replace