Why is innerHTML = "" slow in Firefox

Question

I am testing the speed of different methods to dynamically add html elements to the DOM. I've build a tester here (code is working version, so pretty sloppy). The results are (very) different for different browsers with Chrome getting all the points for speed, and Opera a good second - but that's not the question here.

In Firefox I detected a problem with clearing a div (from it's childNodes). When some 50.000 div elements are added, it takes ages to clear, using just

[div].innerHTML = "";

What is going on here? Did firefox implement some intrinsic garbage collection method for this?

Answer 1

innerHTML is not a part of the W3C DOM specification.

It should never be used to write parts of a table—W3C DOM methods should be used for that—though it can be used to write an entire table or the contents of a cell.

As there is no public specification for this property, implementations differ widely. For example, when text is entered into a text input, IE will change the value attribute of the input's innerHTML property but Gecko browsers do not.

For those wishing to adhere to standards, here is one set of JavaScript functions offering to serialize or parse XML so as to set element contents defined as string(s) via the DOM or getting element contents obtained from the DOM as a string.

Source - Mozilla Dev

Answer 2

While i am not sure about the innerHTML = "" you left out one possibly fast appoach using DocumentFragments for inserting into the DOM: As john resig shows

As Ólafur Waage already mentioned eventhough innerHTML is faster in alot of situations since it's not part of any w3c standard quirks are far more likely to be introduced then if they were. Not to say innerHTML is not a defacto standard within modern browsers.

This blog post seems to indicate that FF spends alot of time cleaning up after itself when using innerHTML to remove elements.

In some browsers (most notably, Firefox), although innerHTML is generally much faster than DOM methods, it spends a disproportionate amount of time clearing out existing elements vs. creating new ones. Knowing this, we can combine the speed of destroying elements by removing their parent using the standard DOM methods with creating new elements using innerHTML.