5

最近、このチュートリアルで、特定のjQueryリークは$.cache変数を通じて追跡可能であり、そのサイズを常に確認する必要があることを読みました。サイズが大きすぎる場合は、何か間違ったことをしています。

さて、どのくらいの大きさが大きすぎますか？変数を調べて、それが消費しているメモリの量を確認する方法はありますか?

ホームページをロードするだけで 210 個のオブジェクトをキャッシュする Web サイトに取り組んでいます。それは多すぎますか？ここで問題についての完全な説明をいただければ幸いです。

4

1 に答える 1

3

$.cacheの額面上のサイズは、メモリ リークについては何もわかりません。非常に小さくてもメモリ リークが発生する場合もあれば、非常に大きくてもメモリ リークが発生しない場合もあります。

ページ上で一度に 10 個のイベント リスナーが jQuery にバインドされてい$.cacheて、それ以上のエントリがあることがわかっている場合は、リークしていることがわかります。

メモリを大幅に節約するには、個々の要素にイベント リスナーをアタッチするのではなく、イベント委任を使用します。

言う：

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

$("li").on( "click", fn )3 つの個別のイベント ハンドラーをアタッチします (もちろん、より多くの li がある場合はさらに)。一方、$("ul").on( "click", "li", fn)li 要素の数に関係なく 1 つだけをアタッチし、同じ結果を得ます。

漏れの例:

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

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

理由は、jQuery の一部ではない .innerHTML が使用されているため、クリーンアップを実行できないためです。

修正は、同じためにjQueryメソッドを使用することです:

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

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

于 2012-10-10T12:50:57.053 に答える