JavaScript/JQuery 垃圾收集和事件答案

【问题标题】：JavaScript/JQuery Garbage Collection and EventsJavaScript/JQuery 垃圾收集和事件
【发布时间】：2015-05-12 16:06:31
【问题描述】：

假设我有这个 JQuery 代码，它通过它的 ID 选择和获取一个元素，然后将 click 事件放入它：

$( "someID" ).click( dummyCallback );

在后面的代码中，我使用 replaceWith() 或 remove() 函数从 DOM 中删除了这个元素。

$( "someID" ).replaceWith( "<div>New Element</div>" );

所以这个元素将从 DOM 中消失，但是绑定到它的事件呢？据我了解，事件也是对象并占用内存空间。

JavaScript/JQuery 是否也会清理该对象，或者在删除我应该做的元素之前：

$( "someID" ).off( "click" );

【问题讨论】：

理论上是的。当调用remove()、off()、empty() 等时，jQuery 会尽力销毁所有不再使用的资源，但它主要取决于您正在使用的浏览器的 JavaScript 实现是否该内存再次被标记为可用。
jQuery 的核心架构目标之一（至少从历史上看）是防止内存泄漏问题，尤其是在旧版本的 Internet Explorer 中。
除了元素本身，所有与元素相关的绑定事件和jQuery数据都被移除 (ref.)
感谢您提供这些出色的答案，我无法相信你们的速度有多快。 @hindmost 是的，我现在看到了，它就在用于 remove() 和 replaceWith() 函数的 JQuery 文档中。

标签： javascript jquery html dom garbage-collection

【解决方案1】：

如果您使用 remove、replaceWith、html 等专用方法删除元素，则不必担心内存泄漏。这些方法 jQuery 调用 $.cleanData 方法。

例如，对于replaceWith，您可以看到 jQuery 从内部缓存中删除事件和数据对象以防止泄漏：

if ( jQuery.inArray( this, ignored ) < 0 ) {
    jQuery.cleanData( getAll( this ) );
    if ( parent ) {
        parent.replaceChild( elem, this );
    }
}

当然，如果这些元素具有与之关联的 jQuery 事件侦听器/数据，则永远不应该使用纯 DOM 方法删除这些元素。

【讨论】：

感谢 dfsq 的出色回答和链接。

【解决方案2】：

jQuery 只是原生 JavaScript 函数的包装器。在 jQuery 中可以做的任何事情都可以在 JavaScript 中完成。

$( "someID" ).click( dummyCallback );

归结为：

document.getElementById("someID").addEventListener("click", dummyCallback, true);
// or the equivalent in older browsers

那么浏览器如何处理移除的 DOM 元素上的事件监听器呢？简单的答案是，只要没有以其他方式引用它们，它就会清理它们。您无需手动删除该事件。

您可以（无意或有意）保留对 DOM 元素（即使它已从 DOM 中删除）或事件处理程序的引用。保留引用将使该代码保留在内存中。

知道即使你保留了对事件处理程序的引用，DOM 节点仍然可以被清理，但反过来就不行了。

【讨论】：

感谢 Halcyon，这基本上是我想知道的。