用Chrome查找JavaScript内存泄漏

Question

代码的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();

然而，我不清楚如何使用谷歌Chrome的分析器来验证这是，事实上的情况。堆探查器快照中出现了无数的东西，我不知道如何解码什么是好的/坏的。到目前为止，我在它上面看到的教程要么告诉我“使用快照分析器”，要么给我一个关于整个分析器如何工作的非常详细的宣言。是否可以仅仅将探查器作为一个工具，或者我真的必须了解整个事情是如何设计的？

编辑：像这样的教程：

>

检查配置文件面板下半部分泄漏对象的保留路径

如果不能很容易地推断分配站点（即事件侦听器）：

通过JS控制台检测保留对象的构造函数，以保存分配的堆栈跟踪

Answer 1

找到内存泄漏的一个好的工作流程是三快照技术，最早由Loreena Lee和Gmail团队使用，以解决他们的一些内存问题。这些步骤通常是：

• 获取堆快照。
• 做事情。
• 获取另一个堆快照。
• 重复相同的内容。
• 获取另一个堆快照。
• 筛选快照3的“摘要”视图中快照1和快照2之间分配的对象。

对于您的示例，我修改了代码以显示这个过程（您可以在这里找到它），将骨干视图的创建延迟到Start按钮的click事件。现在：

null

然而，黄色节点确实有来自JavaScript的直接引用。在同一个分离的DOM树中寻找黄色节点，以定位JavaScript中的引用。应该有一个从DOM窗口到元素的属性链。

在您的特定中，您可以看到标记为红色的HTML Div元素。如果展开该元素，您将看到由“cache”函数引用的元素。

选择该行，并在控制台中键入$0，您将看到实际的函数和位置：

>$0
function cache( key, value ) {
        // Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
        if ( keys.push( key += " " ) > Expr.cacheLength ) {
            // Only keep the most recent entries
            delete cache[ keys.shift() ];
        }
        return (cache[ key ] = value);
    }                                                     jquery-2.0.2.js:1166

function cache( key, value ) {
    return value;
}

null