javascript remove all child nodes javascript / jquery (v219)

Revision 219 of this benchmark created on

Description

This actually benchmarks what it says it is (most of these other tests just test against an empty element because setup only fires once per benchmark, not per iteration.

Also using a clone to repopulate the html means that the test time is less skewed by refreshing the dom to a state to benchmark.

Preparation HTML

<div id="box"></div>

<script>
var boxAnchor = document.createElement('div');
boxAnchor.style.cssText="white-space:nowrap";
boxAnchor.id = 'box';
for(var i=0;i<1000;i++)
{
boxAnchor.appendChild(document.createElement('B').insertBefore(document.createTextNode('asdf fewf')).parentNode);
}
var box=document.getElementById('box');
function refreshRange()
{
box.parentNode.replaceChild(boxAnchor.cloneNode(true),box);
box=document.getElementById('box');
}
refreshRange();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
removeChild Recheck
refreshRange();
while (box.firstChild) 
  box.removeChild(box.firstChild);
ready
removeChild lastChild with reference
refreshRange();
    var last;
    while ((last = box.lastChild)) box.removeChild(last);
ready
firstChild haschildnodes() check
refreshRange();
while(box.hasChildNodes())
  box.removeChild(box.firstChild);
ready
deletecontents (IE9+)
refreshRange();
var range = document.createRange();
range.selectNodeContents(box);
range.deleteContents();
ready
replaceChild cloneNode(shallow) (DESTRUCTIVE)
refreshRange();
var newBox = box.cloneNode(false);
box.parentNode.replaceChild(newBox,box);
box=newBox;
ready
removeChild then reAttach
refreshRange();
var parent = box.parentNode;
var next = box.nextSibling;
parent.removeChild(box);
while(box.hasChildNodes())
  box.removeChild(box.firstChild);
parent.insertBefore(box,next);
ready
innerhtml = ""
refreshRange();
box.innerHTML = '';
ready
jquery
refreshRange();
$(box).contents().remove();
ready
hide
refreshRange();
var display = box.style.display;
box.style.display = 'none';
while(box.hasChildNodes())
  box.removeChild(box.firstChild);
box.style.display = display;
ready
innerHTML hide
refreshRange();
box.hidden = true;
box.innerHTML = '';
box.hidden = false;
ready
hide hide
refreshRange();
box.hidden = true;
while(box.hasChildNodes())
  box.removeChild(box.firstChild);
box.hidden = false;
ready

Revisions

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