Run results for: replace content

Run details:

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

Browser: Firefox 95

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
replaceChildren	583433.4 Ops/sec
remove and insert	833745.2 Ops/sec
remove and replace	432164.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