removeChildren (v8)

Revision 8 of this benchmark created by Francis Avila on

Description

From http://elv1s.ru/files/html+css/removeChildren.html

Test various ways of emptying an element of child nodes

Preparation HTML

<div id="container" style="display:none">
</div>

Setup

var container = document.getElementById('container'),
        proto = addelements(document.createDocumentFragment());
    
    function addelements(proto) {
      var i = 200,
          p, j, span;
      while (i--) {
        p = document.createElement('p');
        j = 5;
        while (j--) {
          span = document.createElement('span');
          span.appendChild(document.createTextNode(i * j + 'yada-yada'));
          p.appendChild(span);
        };
        proto.appendChild(p);
      };
      return proto;
    };
    
    function prepare() {
      container.appendChild(proto.cloneNode(false));
    };

Teardown


    if (container.childNodes.length) {
        throw "Container was not emptied!";
    }

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
prepare();

container.innerHTML = '';
ready
textContent
prepare();

container.textContent = '';
ready
removeFirstChild
prepare();

var child;
while (child = container.firstChild) {
  container.removeChild(child);
};
ready
remove lastChild
prepare();

var child;
while (child = container.lastChild) {
  container.removeChild(child);
};
ready
remove by count
prepare();

var len = container.childNodes.length;
while (len--) {
  container.removeChild(container.lastChild);
};
ready
forEach
prepare();

Array.prototype.forEach.call(container.childNodes, function(e) {
  this.removeChild(e);
}, container);
ready

Revisions

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

  • Revision 1: published by Nikita Vasilyev on
  • Revision 2: published by Thomas Aylott on
  • Revision 3: published by Mathias Bynens on
  • Revision 7: published on
  • Revision 8: published by Francis Avila on
  • Revision 9: published on