为啥innerHTML =“”在Firefox中很慢

Posted 2023-02-21

【中文标题】为啥innerHTML =“”在Firefox中很慢

【英文标题】：Why is innerHTML = "" slow in Firefox为什么innerHTML =“”在Firefox中很慢

【发布时间】：2010-10-11 05:11:08

【问题描述】：

我正在测试将 html 元素动态添加到 DOM 的不同方法的速度。我已经构建了一个测试器here（代码是工作版本，非常草率）。对于不同的浏览器，结果（非常）不同，Chrome 在速度方面获得了所有分数，而 Opera 则是第二好——但这不是这里的问题。

在 Firefox 中，我检测到清除 div 的问题（从它的 childNodes 中）。当添加大约 50.000 个 div 元素时，需要很长时间才能清除，仅使用

[div].innerHTML = "";

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

【参考方案1】：

虽然我不确定innerHTML = ""，但您遗漏了一种使用 DocumentFragments 插入 DOM 的可能快速方法：As John Resig shows。

正如Ólafur Waage 已经提到的，尽管innerHTML 在很多情况下速度更快，因为它不是任何W3C 标准的一部分，但如果有的话，更可能会引入怪癖。并不是说 innerHTML 在现代浏览器中不是事实上的标准。

This blog post 似乎表明 Firefox 在使用 innerHTML 删除元素时会花费大量时间自行清理。

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

【讨论】：

是的，完全错过了 DocumentFragments！开辟新思路，谢谢。博客链接也很到位。

老问题，但我认为这个人应该归功于我所知道的最早发布的组合方法。这在配备 JIT 的现代浏览器中可能不太重要，但据我所知，它仍然很好用：blog.stevenlevithan.com/archives/faster-than-innerhtml

【参考方案2】：

innerHTML 不是 W3C DOM 规范的一部分。

它永远不应该用于编写表格的一部分——应该使用 W3C DOM 方法——尽管它可以用于编写整个表格或单元格的内容。

由于没有针对此属性的公开规范，因此实现差异很大。例如，在文本输入中输入文本时，IE 会更改输入的 innerHTML 属性的 value 属性，但 Gecko 浏览器不会。

对于那些希望遵守标准的人，here is one set of javascript functions 提供序列化或解析 XML 以便通过 DOM 设置定义为字符串的元素内容或获取从 DOM 获取的元素内容作为字符串。

Source - Mozilla Dev

【讨论】：

我不是在写（部分）表格。测试页使用不同的方法在容器 div 中生成 50.000 个 div。 innerHTML = '' 的问题只发生在 Firefox 中，我很好奇是什么原因造成的。无论如何感谢您的回答。

我认为这句话很好地回答了你的问题。 “由于没有针对此属性的公开规范，因此实现差异很大。”

innerHTML 在DOM Parsing 规范中定义。