remove-all-child-elements-of-a-dom-node-in-javascript

JavaScript performance comparison

Test case created by

Preparation code

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>this.jq111 = jQuery.noConflict(true);</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>this.jq311 = jQuery.noConflict(true);</script>
<div id="testDiv"></div>
<script>
// Create test div to quickly clone for future tests because
// setup must occur in inside test loop in order for tests 
// to be meaningful test
var testDivShadow = document.createElement('DIV');
testDivShadow.id = "testDiv";

var i, b, text, refreshNodeCalls = 0;
for(i=0;i<1000;i++)
{
  // Fill with a bunch of random text
  b = document.createElement('B');
  text = document.createTextNode('foobar');
  b.insertBefore(text, b.firstChild);
  testDivShadow.appendChild(b)
}

function refreshNodes ()
{
  // This is here to make a point that if you don't call this,
  // only the first loop iteration of any test will contain
  // meaninful data and the overall average will be worthless
  refreshNodeCalls++;
  // Get old content div
  var oldDiv = document.getElementById('testDiv');
  // Replace with clone of filled content div
  testDiv = testDivShadow.cloneNode(true);
  oldDiv.parentNode.replaceChild(testDiv, oldDiv);
}

// Range for range removal method test
var range = document.createRange();
</script>
      
<script>
Benchmark.prototype.teardown = function() {
  if(refreshNodeCalls < 2)
      throw new Error("Dom nodes not recreated during iterations, test results will be meaningless");
  if(testDiv.childNodes.length > 0)
      throw new Error("Didn't actually clear nodes");
  
  // Clear dom caches just in case?
  for (var x in this.jq311.cache)
      delete this.jq311.cache[x];
  
  for (var x in this.jq111.cache)
      delete this.jq111.cache[x];
  
  // Reset refresh call counter
  refreshNodeCalls  = 0;

};
</script>

Preparation code output

<script>this.jq111 = jQuery.noConflict(true);</script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>this.jq311 = jQuery.noConflict(true);</script> <div id="testDiv"></div> <script> // Create test div to quickly clone for future tests because // setup must occur in inside test loop in order for tests // to be meaningful test var testDivShadow = document.createElement('DIV'); testDivShadow.id = "testDiv"; var i, b, text, refreshNodeCalls = 0; for(i=0;i<1000;i++) { // Fill with a bunch of random text b = document.createElement('B'); text = document.createTextNode('foobar'); b.insertBefore(text, b.firstChild); testDivShadow.appendChild(b) } function refreshNodes () { // This is here to make a point that if you don't call this, // only the first loop iteration of any test will contain // meaninful data and the overall average will be worthless refreshNodeCalls++; // Get old content div var oldDiv = document.getElementById('testDiv'); // Replace with clone of filled content div testDiv = testDivShadow.cloneNode(true); oldDiv.parentNode.replaceChild(testDiv, oldDiv); } // Range for range removal method test var range = document.createRange(); </script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
removeChild while firstChild
refreshNodes();
while (testDiv.firstChild) 
  testDiv.removeChild(testDiv.firstChild);
pending…
removeChild while lastChild
refreshNodes();
var last;
while ((last = testDiv.lastChild)) 
  testDiv.removeChild(last);
pending…
removeChild while detached from document
refreshNodes();
var parent = testDiv.parentNode;
var next = testDiv.nextSibling;
parent.removeChild(testDiv);
while(testDiv.hasChildNodes())
  testDiv.removeChild(testDiv.firstChild);
parent.insertBefore(testDiv, next);
pending…
jquery 3.1.1 empty()
refreshNodes();
jq311(testDiv).empty();
pending…
innerHTML = ""
refreshNodes();
testDiv.innerHTML = "";
pending…
jquery 1.1.1 empty()
refreshNodes();
jq111(testDiv).empty();
pending…
removeChild while hidden
refreshNodes();
var display = testDiv.style.display;
testDiv.style.display = 'none';
while(testDiv.hasChildNodes())
  testDiv.removeChild(testDiv.firstChild);
testDiv.style.display = display;
pending…
range.deleteContents (IE9+)
refreshNodes();
range.selectNodeContents(testDiv);
range.deleteContents();
pending…
firstChild while hasChildNodes
refreshNodes();
while (testDiv.hasChildNodes()) 
  testDiv.removeChild(testDiv.firstChild);
pending…
clone without children
refreshNodes();
var clone = testDiv.cloneNode(false);
testDiv.parentNode.replaceChild(clone, testDiv);
testDiv = clone;
pending…

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

0 Comments