IE浏览器中页面卸载缓慢

Question

我正在开发一个动态创建许多表格行的网站。目前总行数为187行。在创建这些行时，一切都很正常，但是当我离开页面时，在IE浏览器中会出现大量的延迟。我不知道这是否与我在页面中进行的DOM操作有关？在构建动态内容的事件处理程序时，我没有创建任何函数闭包，因此我不认为这个问题与内存泄漏有关。非常感谢您的帮助。

- ForYourOwnGood

---

当您关闭选项卡时，延迟是否也会发生？ - Paul Sonier

你正在使用哪些 JavaScript 库？ - stevedbrown

Answer 1

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

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

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

我在IE8中没有遇到任何延迟，但也许你使用的版本会有延迟。如果可以的话，希望你能告诉我！也许我可以提供更多帮助。

祝好

- apeace

---

我最初创建了一个锚标签，然后将该锚标签的点击处理程序设置为函数闭包，但我现在意识到IE的垃圾回收器不知道循环引用，所以我改变了它，现在我创建一个span并将其innerHTML设置为之前使用document.createElement创建的锚标签。我喜欢你的例子，但是你的页面只有简单的文本，而我正在处理的页面上有许多图像等，因此我认为你的例子不能与我的实现相比。 - ForYourOwnGood

Answer 2

我同意porneL的观点。将一个事件处理程序附加到<table>，让冒泡起作用。大多数框架都提供了一种方法，让您找到引起原始事件的元素（通常称为“目标”）。

如果您使用document.createElement()创建了许多元素，则可以将它们添加到DOM片段中。当您将片段附加到页面时，它会附加到所有附加到它的子节点。这个操作比逐个附加每个节点要快。John Resig在DOM文档片段上有一个很好的写作：http://ejohn.org/blog/dom-documentfragments/

- gscottolson

Answer 3

YUI（以及其他一些流行的JavaScript库）提供{{link1：自动侦听器清理}}，因此我强烈建议使用具有此功能的YUI或其他库，以最小化IE的问题。 但是，听起来您可能正在经历普通的缓慢而不是任何类型的内存泄漏问题； 您正在将事件处理程序附加到许多元素。 IE6众所周知不够优化，因此它可能需要很长时间才能清理所有内容。

apeace也有一个很好的观点：innerHTML可能会让您陷入麻烦并设置DOM怪异性。 听起来JQuery已经解决了这个问题。

- user121579

Answer 4

尝试利用event bubbling来替换所有事件处理程序，只使用一个。

- Kornel