innerHTML vs removeChild (v526)

Revision 526 of this benchmark created by Christopher Rogers on

Preparation HTML

<div id='box'></div>

Setup

var box = document.getElementById('box');
  var populateBox = function () {
    box.innerHTML = '<span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span><span>Abc123</span>';
  };
  
  populateBox();

Test runner

Ready to run.

Testing in
TestOps/sec
replace with empty clone
populateBox();

var clone = box.cloneNode();
box.parentNode.replaceChild(clone, box);
box = clone;
ready
remove firstChild
populateBox();

while (box.firstChild) {
  box.removeChild(box.firstChild);
}
ready
remove lastChild
populateBox();

while (box.lastChild) {
  box.removeChild(box.lastChild);
}
ready
innerHTML
populateBox();

box.innerHTML = "";
ready

Revisions

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