removeChildren

JavaScript performance comparison

Revision 2 of this test case created by Thomas Aylott and last updated

Info

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

With an additional test for teh lulz

Preparation code

<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

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

Java applet disabled.

Testing in unknown unknown
Test Ops/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);
pending…
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);
pending…
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);
pending…
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);
pending…
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);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment