Khi nào $ .cache được coi là quá lớn?

Question

Gần đây tôi đã đọc trong số this tutorial rằng một số lỗ rò jQuery nhất định có thể theo dõi được thông qua biến số $.cache và bạn luôn phải kiểm tra kích thước của nó nếu quá lớn, bạn đang làm điều gì đó sai.

Vâng, kích thước quá lớn? Có cách nào để kiểm tra một biến để xem có bao nhiêu bộ nhớ đang ăn không?

Tôi đang làm việc trên một trang web lưu trữ 210 đối tượng chỉ bằng cách tải trang chủ. Đó là quá nhiều? Tôi sẽ đánh giá cao một lời giải thích kỹ lưỡng về vấn đề này ở đây.

Answer 1

$.cache kích thước theo giá trị khuôn mặt không cho biết bất kỳ điều gì về rò rỉ bộ nhớ. Nó có thể rất nhỏ và vẫn có rò rỉ bộ nhớ, hoặc nó có thể rất lớn và không có bất kỳ rò rỉ bộ nhớ nào.

Nếu bạn biết bạn có 10 trình xử lý sự kiện bị ràng buộc với jQuery trên trang tại một thời điểm, và chưa $.cache có mục nhập để biết thêm, thì bạn biết bạn đang bị rò rỉ.

Trình tiết kiệm bộ nhớ lớn là sử dụng tính năng ủy quyền sự kiện thay vì gắn trình xử lý sự kiện vào từng phần tử riêng lẻ.

Say:

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

$("li").on("click", fn) sẽ đính kèm 3 xử lý sự kiện cá nhân (thêm, nếu bạn có nhiều li của khóa học), trong khi $("ul").on("click", "li", fn) sẽ đính kèm chỉ là một bất kể có bao nhiêu li-yếu tố mà bạn có và chưa có cùng một kết quả.

---

Ví dụ về rò rỉ:

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

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

Lý do được rằng .innerHTML được sử dụng, mà không phải là một phần của jQuery vì vậy nó không thể làm sạch.

Fix là sử dụng phương pháp jQuery cho cùng:

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

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