Question

我最近在this tutorial中读到某些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/

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

1 个答案: