確定JavaScript的關閉與開發工具

我目前正在開發一個網站，是純JavaScript並在很大程度上依賴於jQuery的&的jQuery UI庫（本網站不打算供普通大衆，因此，漸進增強是不是一個嚴格的要求爲這個項目）。我上執行下面的代碼遇到顯著內存泄漏：確定JavaScript的關閉與開發工具

oDialogBox = $("<div>...</div>"); 
/* Add useful things to the dialog box here */ 
oDialogBox.appendTo("body"); 
oDialogBox.dialog({ 
    /* Other dialog box settings here */ 
    close: function(event, ui) { 
     oDialogBox.dialog("destroy"); 
     oDialogBox.remove(); 
     oDialogBox = null; 
    } 
});

在此對話框中的任何給定的時間，我創建，刪除和修改的大量jQuery的用戶界面按鈕，multiselects實例（每由Eric Hynds創建的Multiselect小部件）和單擊事件處理程序。根據jQuery UI文檔，在oDialogBox 應調用.remove（）應該導致所有子窗口小部件被解除綁定和刪除。然而，我分離的DOM樹顯示了GC未收集的大量垃圾元素。

這很有可能是我錯過了一大組需要安全完成的關閉。如何做到以下幾點：

1）如何確定哪些閉包保持一個給定的分離DOM對象還活着（無論是在Firefox或Chrome）？

2）假設一套完整的倒閉是確定的，不任何超出歸零變量需要做的工作，以確保標記爲垃圾回收的DOM元素？

3）我也注意到，由頁面存儲的數組列表是巨大的，並且包含對GC未收集的DOM元素的引用。是否有記錄的最佳做法從JavaScript清理數組並允許將所有元素標記爲刪除？（注：這是內存泄漏的根源當前首要犯罪嫌疑人）

來源

2012-12-06 D. G.

「*包含DOM元素引用的數組列表*」 - 可能是DOM元素未被垃圾收集的原因？你如何檢查這個列表？ – Bergi

使用chrome開發人員工具時，我一直在使用分析器工具獲取堆快照。運行我的測試後，堆中佔用了近50MB的額外內存。這被分析器識別爲存儲在「（數組）」對象中。隨機檢查發現了Detached DOM樹中元素的jQuery屬性。我還發現了沒有被收集的空陣列的證據。我仍然試圖確定我的代碼中定義的任何數組是否隱藏在10k +對象的列表中。 –

我怕我沒有爲＃1一個偉大的答案。我自己還沒有找到任何真正好的工具，即使在過去的幾年裏開發工具已經變得有多好。我可以給出的最好建議是始終將事情放在最小的範圍內，如果事情不能逃脫，簡單地找出引用必須在哪裏通常會更容易。

至於＃2，可能還有其他顧慮。如果變量v1引用的對象關閉了一些功能的自由變量，消除v1將不足以使他們有資格進行垃圾回收，如果另一個變量v2在一些其他功能關閉了v1。所以我猜如果你真的是指「完整的關閉」，那麼你應該全部設置。但這可能會變得毛茸茸。同樣，如果大多數對象僅在狹義範圍內引用，這些問題就不那麼嚴重了。

對於＃3，你討論什麼樣的數組？如果它是jQuery集合，那麼也許你只是有太多的人。我知道他們長期待下去的唯一原因是將事件處理程序綁定到它們上，而且幾乎總是通過父元素上的事件委託來處理。如果它是你自己的自定義數組，那麼你真的有充分的理由將引用存儲在數組中，並持續相當長的時間嗎？我很少找到一個。

來源

2012-12-06 01:09:20

當我最初閱讀你的回覆時，我的直接反應是「不，該陣列是完全必要的。」但是在深夜思考之後，我真的只是在用戶點擊「提交」時才使用該數組來維護表單數據收集的特殊div的動態列表。在對象和jQuery選擇器上更廣泛地使用類也許可以完成同樣的技巧。 –

如果元素具有ID，則另一種可能性是它們的ID的數組。這個重量更輕，並且可能比DOM類更有針對性。 –

確定JavaScript的關閉與開發工具

回答

相關問題