Info

I observed that removeChild and display="none" were very slow when compared to just hiding an element. Here are some tests.

Preparation code

<script>
var testDIV = document.createElement('div');
testDIV.innerHTML = "Hello World";
</script>
<script>
  Benchmark.prototype.setup = function() {
    document.body.appendChild(testDIV);
    testDIV.style.left = "10px";
    testDIV.style.top= "10px";
  };

  Benchmark.prototype.teardown = function() {
    document.body.appendChild(testDIV);
    testDIV.style.left = "10px";
    testDIV.style.top= "10px";
  };
</script>

Test runner

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

Java applet disabled.

testDIV.style.display="block";

testDIV.style.display="none";

 

document.body.appendChild(testDIV);

document.body.removeChild(testDIV);
 

testDIV.style.left="10px";

testDIV.style.left="-9999px";

 

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:

• Revision 1: published by Jon Howard on 8th February 2012
• Revision 2: published by Jon Howard on 8th February 2012 and last updated on 9th February 2012
• Revision 3: published on 9th February 2012

0 comments