Benchmark: replace content - MeasureThat.net

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
replaceChildren
remove and insert
remove and replace

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
replaceChildren	480284.0 Ops/sec
remove and insert	681723.9 Ops/sec
remove and replace	362125.1 Ops/sec

replace content (version: 1)

Howto clear Element Content

Comparing performance of: replaceChildren vs remove and insert vs remove and replace

Created: 2 years ago by: Registered User

Jump to the latest result

replaceChildren

remove and insert

remove and replace

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A