在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

YUI（也可能是其他一些流行的JavaScript庫）提供automatic listener cleanup，所以我強烈建議使用YUI或另一個庫使用此功能，以儘量減少與IE瀏覽器的問題。但是，聽起來您可能會遇到簡單的緩慢而不是任何類型的內存泄漏問題;您將事件處理程序附加到一大堆元素。已知IE6的優化程度並不高，所以它可能只是永遠需要清理一切。

apeace也有一個好點：innerHTML的可以給你帶來麻煩，併爲您設置DOM怪事。這聽起來像JQuery有一個解決方案。

Answer 3

嘗試爲event bubbling優勢只有一個，以取代所有事件處理程序。

Answer 4

我同意porneL。附加一個事件處理程序到<表>，讓冒泡工作的魔力。大多數框架爲您提供了一種找到導致原始事件的元素（通常稱爲「目標」）的方式。

如果您在使用使用document.createElement（），你可以將它們添加到DOM片段賺很多元素。將片段追加到頁面時，會附加連接到它的所有子節點。該操作比一次一個追加每個節點更快。約翰Resig的對DOM文檔片段一個偉大的寫了起來：http://ejohn.org/blog/dom-documentfragments/