從內存中刪除HTML元素（DOM節點）

Question

根據mdn文檔 ，方法removeChild從DOM中刪除一個節點，但它仍然駐留在內存中。 我的問題是我也想從內存中刪除它。 我嘗試過delete操作符，但對象仍然存在...

myCanvas.parentElement.removeChild(myCanvas);  // myCanvas actually removed from DOM
delete myCanvas;  // false. does nothing
alert(myCanvas); // shows HTMLCanvasElement instead of undefined

Answer 1

閱讀http://perfectionkills.com/understanding-delete/ 。 刪除操作符不適用於變量（這就是它返回false的原因）。

如果要刪除變量對DOM節點的引用，請使用

myCanvas = null;

覆蓋該值。 通常你永遠不需要這樣做，因為JS的垃圾收集器為你做了所有工作。

Answer 2

只需為myCanvas變量指定另一個值（如null ），以便不再有變量引用canvas元素。 垃圾收集將完成剩下的工作。

當然，沒有保證。 這假設沒有其他變量引用該元素。 否則，如果還有其他變量，對象等仍然引用該canvas元素，那么它根本不會從內存中刪除。 如果存在包含對元素的引用但無法解除引用的閉包，則會更難刪除。

Answer 3

好吧，如果您在沒有var關鍵字的情況下初始化myCanvas變量，那么您的代碼片段就可以工作了，因為這些變量可以自動configurable: true ，因此可以使用delete運算符進行處理而不會有任何麻煩。

或者，您可以使用getElementsByClassName()方法中的對象引用而不是單獨的HTMLElement本身

- 我在這里假設myCanvas是getElementById()操作之類的結果 -

因為getElementsByClassName()生成的HTMLCollection將自動更新並在從樹中刪除后立即刪除對該DOM對象的任何引用。

換句話說，它本質上是活的，因此它不需要任何手動操作來破壞/清除引用。

Answer 4

基本答案是引用畫布的所有變量都需要設置為undefined以便垃圾收集器可以完成其工作。 但有時它在實踐中並不那么簡單。

在嘗試完全刪除動態創建的HTML canvas元素以避免內存泄漏時，我遇到了幾個棘手的情況：

（1）我添加到canvas元素的方法保存了它們自己的引用（創建一個循環）。 我通過在刪除畫布時刪除所有自定義屬性來解決此問題：

function deleteAllProperties(obj) {
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            delete obj[key];
        }
    }
}
deleteAllProperties(myCanvas);
myCanvas = undefined;

（2）其他對象中的內部變量仍然引用了畫布。 通過將它們全部設置為undefined來修復：

_myVar = myBuilder = myObserver = undefined;

（3）變量引用畫布'context： var ctx = myCanvas.getContext('2d'); 這在某些瀏覽器中保留在畫布上（即使在設置myCanvas = undefined ）。 通過清除該變量來修復：

ctx = undefined;