Tôi đã tạo một trường hợp thử nghiệm rất đơn giản để tạo chế độ xem Xương sống, gắn trình xử lý vào một sự kiện và khởi tạo một lớp do người dùng định nghĩa. Tôi tin rằng bằng cách nhấp vào nút "Xóa" trong mẫu này, mọi thứ sẽ được dọn sạch và sẽ không có rò rỉ bộ nhớ.
Một jsfiddle cho mã ở đây: http://jsfiddle.net/4QhR2/
// scope everything to a function
function main() {
function MyWrapper() {
this.element = null;
}
MyWrapper.prototype.set = function(elem) {
this.element = elem;
}
MyWrapper.prototype.get = function() {
return this.element;
}
var MyView = Backbone.View.extend({
tagName : "div",
id : "view",
events : {
"click #button" : "onButton",
},
initialize : function(options) {
// done for demo purposes only, should be using templates
this.html_text = "<input type='text' id='textbox' /><button id='button'>Remove</button>";
this.listenTo(this,"all",function(){console.log("Event: "+arguments[0]);});
},
render : function() {
this.$el.html(this.html_text);
this.wrapper = new MyWrapper();
this.wrapper.set(this.$("#textbox"));
this.wrapper.get().val("placeholder");
return this;
},
onButton : function() {
// assume this gets .remove() called on subviews (if they existed)
this.trigger("cleanup");
this.remove();
}
});
var view = new MyView();
$("#content").append(view.render().el);
}
main();Tuy nhiên, tôi không rõ cách sử dụng trình tạo hồ sơ của Google Chrome để xác minh rằng trên thực tế, đây là trường hợp. Có một số thứ hiển thị trên ảnh chụp nhanh hồ sơ heap, và tôi không biết làm thế nào để giải mã những gì tốt / xấu. Các hướng dẫn mà tôi đã thấy trên đó cho đến nay chỉ là bảo tôi "sử dụng trình tạo ảnh chụp nhanh" hoặc đưa cho tôi bản tuyên ngôn cực kỳ chi tiết về cách thức hoạt động của toàn bộ trình lược tả. Có thể chỉ sử dụng profiler như một công cụ, hoặc tôi thực sự phải hiểu làm thế nào toàn bộ được thiết kế?
EDIT: Hướng dẫn như thế này:
Là đại diện của một số vật liệu mạnh hơn ngoài kia, từ những gì tôi đã thấy. Tuy nhiên, ngoài việc giới thiệu khái niệm về 3 Kỹ thuật chụp nhanh , tôi thấy họ cung cấp rất ít về kiến thức thực tế (cho một người mới bắt đầu như tôi). Hướng dẫn 'Sử dụng DevTools' không hoạt động thông qua một ví dụ thực tế, vì vậy mô tả khái niệm mơ hồ và chung chung của nó về những điều không quá hữu ích. Đối với ví dụ 'Gmail':
Vì vậy, bạn tìm thấy một rò rỉ. Giờ thì sao?
Kiểm tra đường dẫn giữ lại của các đối tượng bị rò rỉ ở nửa dưới của bảng Cấu hình
Nếu trang phân bổ không thể dễ dàng được suy ra (tức là người nghe sự kiện):
Công cụ xây dựng của đối tượng lưu giữ thông qua bảng điều khiển JS để lưu dấu vết ngăn xếp để phân bổ
Sử dụng đóng cửa? Cho phép cờ hiện có thích hợp (ví dụ: goog.events.Listener.ENABLE_MONITORING) để đặt thuộc tính CreationStack trong khi xây dựng
Tôi thấy mình bối rối hơn sau khi đọc nó, không ít. Và, một lần nữa, nó chỉ bảo tôi làm mọi thứ chứ không phải làm thế nào . Từ quan điểm của tôi, tất cả các thông tin ngoài kia là quá mơ hồ hoặc sẽ chỉ có ý nghĩa với một người đã hiểu quá trình.
Một số vấn đề cụ thể hơn đã được nêu ra trong câu trả lời của @Jonathan Naguin bên dưới.
main10.000 lần thay vì một lần và xem cuối cùng bạn có sử dụng nhiều bộ nhớ hơn không.
