javascript remove all child nodes javascript / jquery (v167)

Revision 167 of this benchmark created by npjohns 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');
}
var range = document.createRange();
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();
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

Revisions

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