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

Question

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

嗯,有多大太大了？有没有办法检查变量,看看它吃多少内存？

我正在开发一个只通过加载主页来缓存210个对象的网站.太多了吗？我很感激在这里对这个问题进行彻底的解释.

Answer 1

$.cache\ 的大小从表面上看并不能说明任何有关内存泄漏的信息。它可能非常小并且仍然存在内存泄漏，或者它可能非常大并且没有任何内存泄漏。

\n\n

如果您知道页面上一次有 10 个事件侦听器与 jQuery 绑定，但$.cache还有更多条目，那么您就知道发生了泄漏。

\n\n

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

\n\n

说：

\n\n

<ul>\n    <li></li>\n    <li></li>\n    <li></li>\n</ul>\n

\n\n

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

\n\n

\n泄漏示例：

\n\n

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

\n\n

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

\n\n

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

\n\n

修复方法是使用 jQuery 方法来实现相同的目的：

\n\n

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

\n\n

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

\n