JQuery 垃圾收集 - 这会干净吗？

Question

许多文章（例如msdn）表示，当循环引用涉及DOM 对象和JS 对象时，在某些浏览器中无法清理循环引用。

（IE 6根本做不到，IE7只能在页面请求之间做）：

Javascript 原生（泄漏）：

function leak(){
    var elem = document.createElement("DIV");
    document.body.appendChild(elem);
    elem.onclick = function () {
        elem.innerHTML = elem.innerHTML + ".";
        // ...
    };
}

因为元素的 onload 属性通过闭包引用回自身，所以它创建了一个循环引用：

elem [DOM] -> elem.onclick [JS] -> elem [DOM]

JQuery 版本（不会泄漏）：

function leak(){
    var elem = $('<div></div>');
    $(document.body).append(elem);
    elem.click(function () {
        elem.html(elem.html() + ".");
        // ...
    };
}

在这种情况下，即使仍然存在循环引用，jQuery 也会阻止在所有相关浏览器中发生泄漏：

elem [JS] -> element [DOM] -> elem.onclick [JS] -> elem [JS]

我的问题：如果仍然存在循环引用，jQuery 如何阻止泄漏？

Answer 1

jQuery 代码中的最后一件事（在 Sizzle 的代码之前，它的选择器引擎）是这样的（这是防止泄漏的代码）：

// Prevent memory leaks in IE
// Window isn't included so as not to unbind existing unload events
// More info:
//  - http://isaacschlueter.com/2006/10/msie-memory-leaks/
if ( window.attachEvent && !window.addEventListener ) {
    window.attachEvent("onunload", function() {
        for ( var id in jQuery.cache ) {
            if ( jQuery.cache[ id ].handle ) {
                // Try/Catch is to handle iframes being unloaded, see #4280
                try {
                    jQuery.event.remove( jQuery.cache[ id ].handle.elem   );
                } catch(e) {}
            }
        }
    });
}

当你在 jQuery 中做任何事情时，它会存储它所做的事情（即函数）和所做的事情（即 DOM 元素）。 onunload 通过 jQuery 缓存从其自己的内部缓存的事件处理程序中删除函数（无论如何存储事件的地方而不是单个 DOM 节点上）。

哦，还有一行：

if ( window.attachEvent && !window.addEventListener ) {

确保它只在 IE 上运行。

Answer 2

只有当您通过库进行所有操作时，JQuery 才能确保没有泄漏。在 jQuery 中有名为“empty”和“cleanData”的例程，您可以仔细阅读它们以确切了解发生了什么，但基本上，代码只是在释放 DOM 元素之前将它知道的所有内容从 DOM 元素中分离出来。当您执行诸如使用“.html()”或“.load()”覆盖元素内容之类的操作时，将调用该例程。

在这种情况下，我个人对“保证”之类的术语非常谨慎。

Answer 3

重写以进一步澄清

在提供的示例中，实际上有 2 个导致内存泄漏的原因。第一次内存泄漏是由于在闭包内创建了对活动 DOM 节点的直接引用。 IE6 等旧版浏览器的垃圾收集器（JS 和 DOM）无法取消此类引用。因此需要在函数结束时清空节点引用。

jQuery 在默认情况下规避了这一点，因为实时 DOM 元素作为属性/属性附加到 jQuery 对象，使用这些元素，上述垃圾收集器可以轻松确定空引用。如果 jQuery 对象有空引用，它会被简单地清理掉，并且它的属性/属性（在这种情况下是对活动 DOM 元素的引用）连同它一起。

所以为了避免这种内存泄漏，就是让一个对象维护对活动 DOM 节点的引用，然后在闭包中引用该对象。闭包只会维护对对象的引用，而不是活动的 DOM 元素，因为该引用属于对象。

// will still leak, but not due to closure references, thats solved.
function noLeak(){
    var obj= {
        elem: document.createElement('div')
    }
    obj.elem.onclick = function(){
        obj.elem.innerHTML = obj.elem.innerHTML + ".";
    }
}

这清除了最明显的循环引用，但仍然存在泄漏（onclick）。节点具有对函数的引用，该函数具有对对象的引用，而对象又具有对节点的引用。规避此泄漏的唯一方法是从addEvent 竞赛中学习（很多人都在努力解决此泄漏；））。巧合的是，可以在其中找到所需的代码，因此我很抱歉没有为此提供代码；）

为事件系统创建一个包装器会增加一些代码，但这是必不可少的。主要思想是添加一个通用事件处理程序，将事件委托给存储所需引用的事件缓存/系统。在卸载事件中，缓存被清除，打破循环引用，允许垃圾收集器（JS 和 DOM）整理自己的角落。