jQuery 中 $.cache 的用途是什么？

Question

我看到通过 .on() 注册的事件处理程序保存在 $.cache 中。 我还看到事件处理程序也保存在 $(elem).data() 中。

$.cache 中保存的对象指的是注册事件的 DOM 节点。当 DOM 节点分离时，这会导致内存泄漏，从而强制调用 .off() 。

我遇到的情况是，我不知道 DOM 节点（我附加了事件处理程序）何时被分离。虽然我可以在代码中保留对该 DOM 节点的引用并调用 .off() 进行清理，但这看起来不太好，因为要知道 DOM 节点何时被删除并不容易已删除。

最好的方法是什么？

Answer 1

我遇到过类似的情况，使用 Knockout 在文档中添加和删除 dom 树。然而，jquery 用于将事件侦听器附加到这些 dom 树。当剔除从文档中删除 dom 元素时，侦听器不会解除绑定，因此 dom 树永远不符合垃圾回收的条件。我们添加了一个清理函数，每次哈希更改时都会遍历 jquery $.cache，甚至找到绑定到不在文档中的 dom 树的处理程序。然后它会解除侦听器的绑定，从而使 dom 树符合垃圾收集的条件，并修复我们所看到的大部分泄漏，即应用程序的往返行程过去会泄漏 13MB，现在进行这些更改后，它仅泄漏 3MB。

for (var i in $.cache) {
            if ($.cache.hasOwnProperty(i)) {

                if ($.cache[i].handle && $.cache[i].handle.elem && document !== $.cache[i].handle.elem && !jQuery.contains(document, $.cache[i].handle.elem)) {
                    //we have an event handler pointing to a detached dom element!
                    //this is a memory leak as this detached dom element cannot be garbage collected until
                    //all references to it are removed. So lets delete the event handler to get memory back!
                    var orphan = $($.cache[i].handle.elem);
                    $('body').append(orphan);
                    orphan.off();
                    orphan.remove();
                    orphan = null;
                }
            }
        }

Answer 2

“执行此操作的最佳方法是什么？”

如果您要使用 jQuery，则必须使用其 API 来删除元素，并且必须使用正确的方法，否则，正如您所说，您将出现内存泄漏。

如果您不知道 DOM 节点何时被删除，并且它是否导致泄漏，我认为这意味着您正在使用另一个库和 jQuery。正是因为这个原因，这不是一个好主意。

您需要确保任何受 jQuery 影响的元素都会被 jQuery 删除。 $.cache 中还存储了一些您未明确设置的数据。这意味着应该使用 jQuery 删除所有元素，而不仅仅是那些认为可能有数据的元素。

---

“jQuery 中 $.cache 的用途是什么？”

将处理程序和其他数据与元素关联起来。数据和元素之间的链接基本上是存储在元素的 Expando 属性上的序列号。

如果您在没有 jQuery 的情况下删除元素，则 $.cache 中的关联数据将被孤立。

这种方法的目的是防止潜在的泄漏。不幸的是，它可能会造成更严重的泄漏。