[Javascript]：使用CreateElement方法創建的元素是否導致內存泄漏，如果沒有正確刪除？

Question

我使用createElement方法創建元素，並將其附加到某個父元素。 稍后，我清除了父元素的innerHTML。 這會導致內存泄漏嗎？ 創建的元素會發生什么？ 如果這是內存泄漏，如何處理呢？ 另外，如果元素附加了任何回調函數，是否需要分離？

var spanelem = document.createElement('span');
spanelem.onclick = function(){
CallMe();
};
var parentdiv = document.getElementById('ParentCnt');
parentdiv.appendChild(spanelem);
.....

.....
parentdiv.innerHTML = " "; //is this memory Leak ? what happens to spanelem?

Answer 1

這取決於。

如果你有代碼 - spanElem仍然存在於內存中（如果var spanelem在全局范圍內，並且你沒有執行spanelem = null ），因為有對象的可訪問引用。

否則，如果spanElem具有來自它的onClick處理程序的唯一引用 - 它將僅在IE8中發生內存泄漏。 所有現代瀏覽器都處理這種情況並清理垃圾收集中的內存。

我想你的意思是不正確相同的代碼，但只是原則 - 在這種情況下你可以檢查是否沒有其他處理程序在其詞匯環境中鏈接到spanElem，如果是這樣的話 - 你可以通過添加清除引用

spanelem = null;

后

parentdiv.appendChild(spanelem);

在MDN查看更多詳細信息

PS如果您運行下一個代碼

var spanelem = document.createElement('span');
spanelem.onclick = function(){
CallMe();
};
var parentdiv = document.getElementById('ParentCnt');
parentdiv.appendChild(spanelem);

parentdiv.innerHTML = '';

console.log(spanelem);

你會發現spanelem仍然存在（它將是相同的，如果你將運行setTimeout(function(){ console.log(spanelem); }, 9999); // some huge delay here ） - 但唯一的原因是對於下面的代碼我們保存spanelem對象的引用，所以gc不會刪除對象。 如果我們不使用它 - gc將刪除它正在運行的對象

Answer 2

通常，如果存在關於垃圾收集的擔憂，那么緩解該問題需要為垃圾收集器創建關閉目標。

將所有引用從變量環境和詞法環境中移除到變量后，該變量就有資格進行收集。

這意味着將變量封裝在自己的執行上下文中將為這些環境提供最小的暴露。 這可以使用立即調用的函數表達式（IIFE）來完成。

(function(){
    var spanelem = document.createElement('span');
    spanelem.onclick = function(){
        CallMe();
    };
    var parentdiv = document.getElementById('ParentCnt');
    parentdiv.appendChild(spanelem);
})()
//CONT'D

...續：此時唯一的參考是通過DOM。 使用appendChild會導致文檔重排，因此如果出現任何導致重排的內容，例如.innerHTML，則可以刪除該條目。 稍后，使用parentdiv.innerHTML = " "將導致刪除條目，並且垃圾收集器最終將按照自己的步調在需要時刪除內存分配。