javascript - IE中的页面卸载缓慢

Question

我正在开发一个动态创建许多表行的站点。现在的总行数是 187。创建行时一切正常，但在 IE 中，当我离开页面时，会有很大的延迟。我不知道这是否与我在页面中进行的繁重的 DOM 操作有什么关系？在构建动态内容的事件处理程序时，我没有创建任何函数闭包，所以我认为这个问题与内存泄漏无关。非常感谢任何见解。

Answer 1

您是手动创建元素节点，还是使用innerHTML？虽然我不确定，但我怀疑 IE 有自己的与 HTML 节点相关的内存泄漏。

我制作了一个演示页面，通过 jQuery 将 187 行添加到表中。我相信 jQuery.append() 使用了一个聪明的小技巧将一个字符串变成一组节点。它创建一个 div 并将该 div 的 innerHTML 设置为您的字符串，然后将该 div 的所有子节点克隆到您指定的节点中，然后最终删除它创建的 div。

http://www.andrewpeace.com/stackoverflow/rows/rows.html

我在 IE8 中没有任何滞后，但也许它会滞后于您使用的版本。如果你让我知道，我会很高兴的！也许我可以提供更多帮助。

和平

Answer 2

我同意porneL。将一个事件处理程序附加到 <table> 并让冒泡发挥其魔力。大多数框架为您提供了一种方法来查找导致原始事件的元素（通常称为“目标”）。

如果您使用 document.createElement() 创建大量元素，则可以将它们添加到 DOM 片段中。当您将片段附加到页面时，它会附加所有附加到它的子节点。此操作比一次添加每个节点要快。John Resig 有一篇关于 DOM 文档片段的精彩文章：http: //ejohn.org/blog/dom-documentfragments/

Answer 3

YUI（可能还有一些其他流行的 javascript 库）提供自动侦听器清理，因此我强烈建议使用 YUI 或其他具有此功能的库，以尽量减少 IE 的问题。但是，听起来您可能会遇到明显的缓慢而不是任何类型的内存泄漏问题；您正在将事件处理程序附加到一大堆元素。众所周知，IE6 的优化程度较低，因此清理所有内容可能需要很长时间。

apeace 也有一个好处：innerHTML 会给你带来麻烦，并让你陷入 DOM 的怪圈。听起来 JQuery 对此进行了修复。

Answer 4

尝试利用事件冒泡将所有事件处理程序替换为一个。