javascript - 销毁元素和事件

Question

对 DOMElement 的调用是否innerHTML = ""会破坏所有子元素和附加在它们上的所有事件？或者是否需要delete在调用之前手动所有这些innerHTML以防止内存消耗？谢谢。

score 4 · Accepted Answer

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

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

在 IE 的旧副本上存在一个问题，如果一个元素分配了一个处理程序并且该处理程序也有一个对该元素的引用（通常是因为它是一个闭包），那么该循环引用甚至会将元素和处理程序都保留在内存中如果没有其他东西对它们有任何引用。例如：

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

Because the anonymous event handler is a closure over the context of the call to foo, it has an (implicit) reference to element. And of course, element has a reference to the handler. This sets up the circle. Older versions of IE can't handle that circle if it crosses the DOM/JavaScript boundary like that.

For that reason, libraries like jQuery and such will actively remove the handler from the element before releasing it (so that the circle is broken).

This isn't an issue with most modern browsers (including very recent versions of IE), which aren't confused by circular references, even when they cross DOM/JavaScript boundaries.

score 2 · Accepted Answer

是innerHTML的，它摧毁了它的所有后代，随之而来的事件也随之而来。

这是一篇有趣的文章，介绍了使用innerHTMLvs DOM replaceChild 添加和替换节点的性能。

编辑：正如 TJ Crowder 指出的那样，早期版本的 IE 存在问题。除非您有支持 IE6 的要求（来自 Frit 的回答），否则应该没什么好担心的。

score 0 · Accepted Answer

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

一般来说，如果你没有任何复杂的事情发生，这将清理所有元素和事件。旧的浏览器被认为是错误的（我认为是 IE6），但在所有现代浏览器中应该没问题。

score 0 · Accepted Answer

innerHTML=""会将它们从 DOM 中删除，是的。如果它们从别处被引用并且您的浏览器没有某些内存泄漏，这可能会使它们可用于垃圾收集。

delete关键字肯定不会帮助你。

javascript - 销毁元素和事件

4 回答 4

Related

Reference