为什么innerHTML =""在Firefox中慢 [英] Why is innerHTML = "" slow in Firefox

问题描述

我正在测试不同方法的速度，以便动态地将HTML元素添加到DOM。我已经建立了一个这里的测试人员（代码是工作版，非常邋））。对于不同的浏览器，结果是（非常）不同的，Chrome获得速度的所有点，Opera是第二个 - 但这不是问题。

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.

在Firefox中，我发现了清除div（来自它的childNodes）的问题。当添加了大约50.000个div元素时，需要花费很长时间才能清除，只需使用

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 = "";

这里发生了什么？ firefox是否为此实现了一些内在的垃圾收集方法？

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

推荐答案

虽然我不确定innerHTML =但你遗漏了一个可能快速使用DocumentFragments插入DOM的方法：正如John Resig所示。

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.

正如ÓlafurWaage已经提到的那样，即使innerHTML在很多情况下更快，因为它不是任何 W3C 标准，如果有的话，怪癖的可能性要大得多。更不用说innerHTML不是现代浏览器中的事实标准。

As Ólafur Waage already mentioned, even though innerHTML is faster in a lot 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.

这篇博客文章似乎表明，当使用innerHTML删除元素时，Firefox会花费大量时间进行清理。

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

在某些浏览器中（最值得注意的是，Firefox），虽然innerHTML通常比DOM方法快得多，但它花费了不成比例的时间来清除现有元素而不是创建新元素。知道了这一点，我们可以通过使用标准DOM方法删除父元素并使用innerHTML创建新元素来组合销毁元素的速度。

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.

这篇关于为什么innerHTML =""在Firefox中慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！