使用 Chrome 查找 JavaScript 内存泄漏
我创建了一个非常简单的测试用例，它创建了一个 Backbone 视图，将一个处理程序附加到一个事件，并实例化一个用户定义的类。我相信通过点击这个示例中的“删除”按钮，所有东西都会被清理干净，应该不会有内存泄漏。
代码的 jsfiddle 在这里: 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();
然而，我不清楚如何使用谷歌浏览器的分析器来验证这一点，事实上，情况是这样的。堆分析器快照上显示的东西太多了，我不知道如何解码哪些是好的，哪些是坏的。到目前为止，我所看到的教程要么只是告诉我“使用快照分析器”，要么给我一个非常详细的宣言，告诉我整个分析器是如何工作的。有没有可能仅仅把分析器作为一种工具使用，或者我真的必须了解整个事情是如何设计的？
编辑: 这样的教程:
代表了一些更强大的材料，从我所看到的。然而，除了介绍 3快照技巧的概念，我发现他们提供的实践知识非常少(对于像我这样的初学者)。“使用 DevTools”教程不能通过真实的例子来实现，所以它对事物的模糊和概念性描述没有太大的帮助。至于“ Gmail”的例子:
所以你找到了漏洞，然后呢？
在 Profiles 面板的下半部分检查泄漏对象的保留路径
如果分配站点不容易推断(即事件侦听器) :
通过 JS 控制台测试保留对象的构造函数，以便为分配保存堆栈跟踪
使用 Closure? 启用适当的现有标志(即 goog.events. Listener.ENABLE _ MONITORING)在构建期间设置 creationStack 属性
我发现自己更困惑后，阅读，而不是更少。而且，再一次，它只是告诉我 做的东西，而不是 怎么做做他们。在我看来，所有这些信息要么太模糊，要么只对那些已经理解过程的人有意义。
其中一些更具体的问题已在下文的 @ Jonathan Naguin 的回答中提出。
最佳答案