MeasureThat.net

Run results for: replace content

Howto clear Element Content

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Chrome 109
Windows
Desktop
2 years 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:
AخA
 
1
<div id="container1"></div>
2
<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

    ​x
     
    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);
    ​