innerHTML vs removeChild (v178)

Revision 178 of this benchmark created on

Description

what method for empty a element is faster ?

Preparation HTML

<div id="container"></div>
<style type="text/css">
    #box, #box * {
        font-size: 0;
    }
    #box * {
        display: inline-block;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        background-color: blue;
    }
</style>

Setup

var box = document.createElement('div');
    box.id = 'box';
    document.getElementById('container').appendChild(box);
    var CHILDREN = 10000;
    function refill() {
        for (var i = box.childNodes.length; i < CHILDREN; i++)
        box.appendChild(document.createElement('div'));
    }

Teardown


    document.getElementById('container').removeChild(box);

Test runner

Ready to run.

Testing in
TestOps/sec
remove first child
refill();
while (box.firstChild)
  box.removeChild(box.firstChild);
ready
remove last child
refill();
while (box.lastChild)
  box.removeChild(box.lastChild);
ready
innerHTML
refill();
box.innerHTML = '';
ready
textContent
refill();
box.textContent = '';
ready
hasChildNodes
refill();
while (box.hasChildNodes())
  box.removeChild(box.firstChild);
ready
check first child
refill();
var firstChild;
while ((firstChild = box.firstChild) !== null)
  box.removeChild(firstChild);
ready
remove by reference foreach
refill();
Array.prototype.slice.call(box.childNodes, 0).forEach(function (node) {
    box.removeChild(node);
});
ready
remove by reference loop
refill();
var rubbish = box.childNodes;
for (var i = rubbish.length - 1; i >= 0; i--)
    box.removeChild(rubbish[i]);
rubbish = undefined;
ready
shallow clone
refill();
var box2 = box.cloneNode(false);
box.parentNode.replaceChild(box2, box);
box = box2;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.