MeasureThat.net

Run results for: innerhtml vs removechild vs remove(firstChild) vs remove(lastChild)

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:89.0) Gecko/20100101 Firefox/89.0
Firefox 89
Mac OS X 10.14
Desktop
3 years ago
Test name Executions per second
removeChild 2528955.5 Ops/sec
remove 2888628.5 Ops/sec
remove (last) 2612774.0 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="container"></div>
Script Preparation code:
​x
 
var node = document.getElementById('container');
​
for(var i = 0; i < 1000; i++) node.appendChild(document.createElement('div'));
Tests:

  • removeChild

     
    var node = document.getElementById('container');
    while(node.firstChild) node.removeChild(node.firstChild)

  • remove

     
    var node = document.getElementById('container');
    while(node.firstChild) node.lastChild.remove()

  • remove (last)

     
    var node = document.getElementById('container');
    while(node.firstChild) node.firstChild.remove()