Run results for: Empty div methods

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
removeChild (while firstChild)	12345000.0 Ops/sec
innerHTML	8056366.0 Ops/sec
replaceChildren	5915779.0 Ops/sec
removeChild (while lastChild)	12478040.0 Ops/sec
remove() while loop	12360760.0 Ops/sec
remove() forEach loop	2963337.0 Ops/sec

HTML Preparation code:


<div id='parent'>
  <li>home</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
</div>

Script Preparation code:

var parent = document.getElementById('parent');

Tests:

removeChild (while firstChild)
while (parent.firstChild) { parent.removeChild(parent.lastChild) }
innerHTML
parent.innerHTML = ""
replaceChildren
parent.replaceChildren()
removeChild (while lastChild)
while (parent.lastChild) { parent.removeChild(parent.lastChild); }
remove() while loop
while (parent.firstChild) { parent.firstChild.remove(); }
remove() forEach loop
[...parent.childNodes].forEach(el => el.remove())

Run results for: Empty div methods

removeChild (while firstChild)

innerHTML

replaceChildren

removeChild (while lastChild)

remove() while loop

remove() forEach loop