removeChildren (v2)

Revision 2 of this benchmark created by Thomas Aylott on

Description

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

With an additional test for teh lulz

Preparation HTML

<script>
  element = document.createElement("div");
  var i = 2000,
      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);
   };
   element.appendChild(p);
  };
  document.body.appendChild(element);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
element.innerHTML = ""


element = document.createElement("div");
var i = 2000,
    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);
 };
 element.appendChild(p);
};
document.body.appendChild(element);
ready
textContent
element.textContent = ""


element = document.createElement("div");
var i = 2000,
    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);
 };
 element.appendChild(p);
};
document.body.appendChild(element);
ready
removeFirstChild
var child
while (child = element.firstChild)
element.removeChild(child)



element = document.createElement("div");
var i = 2000,
    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);
 };
 element.appendChild(p);
};
document.body.appendChild(element);
ready
Append to tmp element
if (!this.tmp) this.tmp = document.createElement('div')

var child

while (child = element.firstChild)
tmp.appendChild(child)


element = document.createElement("div");
var i = 2000,
    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);
 };
 element.appendChild(p);
};
document.body.appendChild(element);
ready
remove firstChild (with 1 reflow?)
document.body.removeChild(element)

var child
while (child = element.firstChild)
element.removeChild(child)

document.body.appendChild(element)



element = document.createElement("div");
var i = 2000,
    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);
 };
 element.appendChild(p);
};
document.body.appendChild(element);
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