javascript - 销毁元素和事件

Question

在 DOMElement 上调用 innerHTML = "" 是否会销毁所有子元素以及附加在其上的所有事件？或者是否需要在调用 innerHTML 之前手动删除所有内容以防止内存消耗？谢谢。

Answer 1

delete 与 JavaScript 中的内存回收或垃圾收集没有任何关系(尽管它与 C++ 中使用的关键字相似)。

当您设置innerHTML时，浏览器将释放对您调用它的元素的所有后代元素的引用。通常，这意味着这些元素以及与它们关联的任何事件处理程序都可以进行清理，前提是没有其他元素仍然引用它们。

旧版 IE 存在一个问题，如果一个元素分配了一个处理程序，并且该处理程序还具有对该元素的引用(通常因为它是一个闭包)，则该循环引用将同时保留该元素和处理程序即使没有其他东西对它们有任何引用，也存在于内存中。例如:

function foo() {
    var element = document.getElementById("foo");
    element.onclick = function() {
        // ...do something
    };
}

因为匿名事件处理程序是对 foo 调用上下文的闭包，所以它具有对 element 的(隐式)引用。当然，element 具有对处理程序的引用。这样就建立了圆圈。如果旧版本的 IE 无法像这样跨越 DOM/JavaScript 边界，则无法处理该圆圈。

出于这个原因，像 jQuery 这样的库会在释放元素之前主动从元素中删除处理程序(这样循环就会被打破)。

对于大多数现代浏览器(包括最新版本的 IE)来说这不是问题，即使它们跨越 DOM/JavaScript 边界，它们也不会被循环引用混淆。