Run results for: replace content

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser: Chrome 109

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
replaceChildren	480284.0 Ops/sec
remove and insert	681723.9 Ops/sec
remove and replace	362125.1 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