JavaScript/JQuery 垃圾收集和事件

Question

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

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

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

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

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

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

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

Answer 1

jQuery 只是本机 JavaScript 函数的包装器。在 jQuery 中可以做的任何事情都可以在 JavaScript 中做。

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

归结为：

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

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

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

知道即使您保留对事件处理程序的引用，DOM 节点仍然可以被清理，但反之则不然。

Answer 2

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

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

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

当然，如果这些元素关联了 jQuery 事件 listeners/data，则您永远不应该使用纯 DOM 方法删除这些元素。

JavaScript/JQuery 垃圾收集和事件

JavaScript/JQuery Garbage Collection and Events

html

javascript

jquery

dom

garbage-collection