javascript - 什么时候 $.cache 被认为太大了？

Question

我最近在本教程中读到，某些jQuery泄漏可以通过$.cache变量进行跟踪，你应该经常检查它的大小，如果它太大，你做错了什么。

那么，多大才算太大？有没有办法检查变量以查看它消耗了多少内存？

我正在开发一个仅通过加载主页来缓存 210 个对象的网站。是不是太多了？我希望能在这里对这个问题进行彻底的解释。

Answer 1

$.cache的面值大小并不能说明内存泄漏。它可能非常小并且仍然存在内存泄漏，或者它可能非常大并且没有任何内存泄漏。

如果您知道页面上一次有 10 个与 jQuery 绑定的事件侦听器，并且还有$.cache更多条目，那么您知道您正在泄漏。

一个巨大的内存节省是使用事件委托而不是将事件侦听器附加到每个单独的元素。

说：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

$("li").on( "click", fn )将附加 3 个单独的事件处理程序（更多，如果你当然有更多的 li），而$("ul").on( "click", "li", fn)无论你有多少个 li 元素但结果相同，都只会附加一个。

---

泄漏示例：

$("button").click( function() {
    $("#target")[0].innerHTML = "";
    $("<div>").appendTo( $("#target")).click( $.noop );
    $("#log").text( Object.keys( $.cache ).length );
});​

http://jsfiddle.net/SGZW4/1/

原因是使用了 .innerHTML，它不是 jQuery 的一部分，因此无法进行清理。

修复方法是使用 jQuery 方法：

$("button").click( function() {
    $("#target").html("");
    $("<div>").appendTo( $("#target")).click( $.noop );
    $("#log").text( Object.keys( $.cache ).length );
});​

http://jsfiddle.net/SGZW4/2/