如果 DOM 元素被移除,它的侦听器是否也从内存中移除?

IT技术 javascript jquery dom memory memory-leaks
2021-01-22 23:20:38

如果 DOM 元素被移除,它的侦听器是否也从内存中移除?

6个回答

现代浏览器

纯 JavaScript

如果被移除的 DOM 元素是无引用的(没有指向它的引用),那么是的- 垃圾收集器以及与之关联的任何事件处理程序/侦听器都会拾取该元素本身。

var a = document.createElement('div');
var b = document.createElement('p');
// Add event listeners to b etc...
a.appendChild(b);
a.removeChild(b);
b = null; 
// A reference to 'b' no longer exists 
// Therefore the element and any event listeners attached to it are removed.

然而; 如果仍有指向该元素的引用,则该元素及其事件侦听器将保留在内存中。

var a = document.createElement('div');
var b = document.createElement('p'); 
// Add event listeners to b etc...
a.appendChild(b);
a.removeChild(b); 
// A reference to 'b' still exists 
// Therefore the element and any associated event listeners are still retained.

jQuery

可以公平地假设 jQuery 中的相关方法(例如remove())将以完全相同的方式运行(考虑remove()是使用removeChild()例如编写的)。

然而,事实并非如此jQuery 库实际上有一个内部方法(它没有记录,理论上可以随时更改)称为cleanData() (这里是这个方法的样子),它会在从 DOM 中删除时自动清理与元素关联的所有数据/事件(通过是这样。remove()empty()html("")等等)。


较旧的浏览器

已知较旧的浏览器(尤其是较旧版本的 IE)存在内存泄漏问题,因为事件侦听器会保留对它们所附加到的元素的引用。

如果您想更深入地解释用于修复旧版 IE 版本内存泄漏的原因、模式和解决方案,我完全建议您阅读这篇关于理解和解决 Internet Explorer 泄漏模式的 MSDN 文章。

还有几篇与此相关的文章:

在这种情况下,您自己手动删除侦听器可能是一个好习惯(仅当内存对您的应用程序至关重要并且您实际上是针对此类浏览器时)。

如果元素包含子元素,它是否也会分离子元素上的事件监听器?
2021-03-14 23:20:38
@Lothre1 谢谢 - 我已经深入挖掘并发现 jQuery 在这方面与常规 JavaScript 的行为有何不同。已更新答案。
2021-03-19 23:20:38
我需要的不仅仅是“个人经验”,更像是硬数据和测试以及规范的链接,这些规范说明内存如何在不再存在于文档中的节点上保持持久性,这太重要了,不能在没有证据的情况下相信某人的话:)
2021-03-31 23:20:38
@Lothre1 - 仅在使用该remove方法时。大多数情况下,DOM 会被完全擦除。(如涡轮链接或其他东西)。我想知道如果我这样做会如何影响记忆document.body.innerHTML = ''......
2021-04-03 23:20:38
根据在元素上使用 remove() 方法时的 jquery 文档,所有事件侦听器都从内存中删除。这会影响它自己的元素和所有子节点。如果您想将事件侦听器保留在内存中,则应改用 .detach() 。当删除的元素将再次插入 dom 时很有用。
2021-04-04 23:20:38

关于jQuery:

.remove() 方法从 DOM 中取出元素。当您想要删除元素本身以及其中的所有内容时,请使用 .remove()。除了元素本身之外,所有与元素关联的绑定事件和 jQuery 数据都将被删除。要在不删除数据和事件的情况下删除元素,请改用 .detach() 。

参考:http : //api.jquery.com/remove/

jQuery v1.8.2.remove()源代码:

remove: function( selector, keepData ) {
    var elem,
        i = 0;

    for ( ; (elem = this[i]) != null; i++ ) {
        if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
            if ( !keepData && elem.nodeType === 1 ) {
                jQuery.cleanData( elem.getElementsByTagName("*") );
                jQuery.cleanData( [ elem ] );
            }

            if ( elem.parentNode ) {
                elem.parentNode.removeChild( elem );
            }
        }
    }

    return this;
}

显然 jQuery 使用 node.removeChild()

根据这个:https://developer.mozilla.org/en-US/docs/DOM/Node.removeChild

The removed child node still exists in memory, but is no longer part of the DOM. You may reuse the removed node later in your code, via the oldChild object reference.

即事件侦听器可能会被删除,但node仍存在于内存中。

你只是增加了混乱 - jQuery 没有做任何简单的处理程序不会做的事情removeChild两者都还返回一个引用,您可以保留以重新附加后者(在这种情况下它显然保留在内存中)或抛出方式(在这种情况下它最终被 GC 拾取并删除)。
2021-03-17 23:20:38
我知道:D。那么你编辑问题的人在哪里?因为我可以发誓,在之前的问题中,有一些关于使用 jquery 删除 DOM 元素的内容。现在我的回答听起来像是我在解释事情只是为了抚慰我的自我。嘿,你总是可以投反对票
2021-03-18 23:20:38

不要犹豫,观察堆以查看事件处理程序中的内存泄漏,该事件处理程序保持对具有闭包的元素的引用,并且该元素保持对事件处理程序的引用。

垃圾收集器不喜欢循环引用。

通常的内存泄漏情况:承认一个对象有一个元素的引用。该元素具有对处理程序的引用。并且处理程序有一个对象的引用。该对象引用了许多其他对象。此对象是您认为已通过从您的集合中取消引用而丢弃的集合的一部分。=> 整个对象及其引用的所有内容都将保留在内存中,直到页面退出。=> 你必须为你的对象类考虑一个完整的杀戮方法,或者例如信任一个 mvc 框架。

此外,不要犹豫,使用 Chrome 开发工具的 Retaining tree 部分。

关于jQuery,以下常用方法还将删除其他构造,例如数据和事件处理程序:

消除()

除了元素本身之外,所有与元素关联的绑定事件和 jQuery 数据都将被删除。

空的()

为了避免内存泄漏,jQuery 在删除元素本身之前从子元素中删除了其他构造,例如数据和事件处理程序。

html()

此外,jQuery 在用新内容替换这些元素之前从子元素中删除了其他构造,例如数据和事件处理程序。

只是扩展其他答案...

删除元素时不会删除委托的事件处理程序。

$('body').on('click', '#someEl', function (event){
  console.log(event);
});

$('#someEL').remove(); // removing the element from DOM

现在检查:

$._data(document.body, 'events');
事件处理程序附加到正文而不是#someEl,自然不应删除处理程序,只要正文仍然存在。
2021-04-05 23:20:38
2021-04-07 23:20:38