摧毁元素和事件

Question

在DOMElement上调用innerHTML = ""会破坏所有孩子及其上附带的所有事件吗？或者在调用delete之前需要手动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边界，也不会被循环引用混淆。

Answer 2

是innerHTML会破坏所有后代，附带的事件也随之消失。

Here is an interesting article查看使用innerHTML与DOM replaceChild添加和替换节点的性能。

编辑：正如T.J. Crowder指出，早期版本的IE存在问题。除非你有要求支持IE6（来自Frit的回答），否则无需担心。

Answer 3

innerHTML = ""只是一种尊重元素的方法。如果您仍然引用了存在于这些元素中的某些数据，则垃圾收集器可能无法清除它。

一般情况下，如果您没有任何复杂的事情，这将清理所有元素和事件。已知较旧的浏览器是错误的（我认为是IE6）但它在所有现代浏览器中应该没问题。

Answer 4

innerHTML=""会将它们从DOM中删除，是的。这可能使它们可用于垃圾收集，如果它们是从其他地方引用的，并且您的浏览器没有确定的内存泄漏。

delete keyword肯定不会帮到你。