通過Javascript更新DOM導致內存泄漏（只在Firefox？）

我知道這個問題之前已經被問過，但沒有一個答案似乎可以解決問題。我正在測試一個通過javascript更新DOM中元素的AJAX網頁。通過Javascript更新DOM導致內存泄漏（只在Firefox？）

每分鐘，都會查詢服務器是否有新數據，並相應更新DOM。從我所知道的情況來看，Chrome中這個頁面的內存使用量會增長，但不會太多（從40 MB開始，最大可達80 MB）。但是，在Firefox中，內存使用開始大約120 MB，可以擴展到400 MB以上。我已經通過Firebug使用了Javascript，並且當通過我的Javascript方法更新DOM時，內存似乎擴大了最多。

的DOM操作很簡單，如：

var myTable = document.createElement("table"); 

var thead = document.createElement("thead"); 
var tr = document.createElement("tr"); 
var th = document.createElement("th"); 
th.appendChild(document.createTextNode("column1")); 
tr.appendChild(th); 

for(var test in obj.testObjs){ 
    th = document.createElement("th"); 
    th.appendChild(document.createTextNode(obj.testObjs[test].myVar)); 
    tr.appendChild(th); 
}

之前追加新的數據到DOM節點，我首先清除現有數據。我已經嘗試了多種方式，包括什麼是說明如下：How to remove DOM elements without memory leaks?

除了作爲一個簡單的方法，如：

function clearChildren(node){ 
    if(node != null){ 
     while (node.hasChildNodes()) node.removeChild(node.firstChild); 
    } 
}

我也看到了（Cyclic adding/removing of DOM nodes causes memory leaks in JavaScript?），其瀏覽器只開始收集垃圾什麼時候達到一定水平？可以證實嗎？由於內存不斷增加，我感覺我的電腦在一段時間後運行緩慢。

我覺得必須有一個解決方案，因爲我測試過的商業網站執行相同的功能步驟不會導致內存使用增長。

任何幫助將不勝感激。

謝謝。

來源

2011-06-25 user172092

innerHTML=''

是錯誤的方式準備一個爲GC處理變量。
您需要使用元素上的delete函數以及此元素引用的每個元素。
很多，對吧？
這就是爲什麼我們有JS庫爲它編寫的原因。我檢查了Mootools中的代碼（下載它並搜索破壞），並且在我看來寫入正確。
我想這在其他庫中也是一樣的。

來源

2011-06-25 21:13:13

感謝您的迴應 - Mootools是否會干擾JQuery？我一直在我的網站上使用JQuery，當試圖使用Mootools的destroy（）函數時，我得到一個JS錯誤，指出「destroy（）不是函數」 – user172092

您需要正確設置它才能一起玩（In我的網站他們做得很好）。就像在Mootools Dependent代碼中不使用'$'一樣，你需要使用'document.id（'選擇器...'）' –

謝謝 - 看起來好像內存使用量現在不是在不斷增長，而且我確實看到它有時會縮小。我感謝您的幫助。 – user172092

可以確認嗎？

這取決於。

一般來說，瀏覽器會在他們覺得喜歡它時使用GC，並且啓發式會經常發生變化。我懷疑，如果你每晚嘗試Firefox，你會看到與你上面描述的行爲完全不同的行爲。自Firefox 5發佈以來，至少有2次GC啓發式更改。

來源

2011-06-29 06:25:22

我們現在有什麼FF版本？我失去了足跡 –

Firefox 5是當前的穩定版本。 6計劃在八月中旬。 –

通過Javascript更新DOM導致內存泄漏（只在Firefox？）

回答

相關問題