使用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();

但是，我不清楚如何使用Google Chrome的探查器来验证是否确实如此。堆探查器快照上显示了无数个庞大的信息，而且我不知道如何解码优缺点。到目前为止，我所看过的教程只是告诉我“使用快照事件探查器”，或者就整个事件探查器的工作原理给了我非常详尽的宣言。可以仅将探查器用作工具，还是真的必须了解整个项目是如何设计的？

编辑：像这样的教程：

Gmail内存泄漏修复

使用DevTools

从我所见，可以代表一些更强的材料。但是，除了介绍3快照技术的概念外，我发现它们在实践知识方面提供的很少（对于像我这样的初学者）。“使用DevTools”教程无法通过一个真实的示例进行工作，因此它对事物的含糊且笼统的概念描述并不太有用。至于“ Gmail”示例：

所以您发现了一个泄漏。怎么办？

• 检查“轮廓”面板下半部分中泄漏物体的固定路径

• 如果无法轻易推断出分配站点（即事件侦听器）：

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

• 使用闭包？启用适当的现有标志（即goog.events.Listener.ENABLE_MONITORING）以在构造期间设置creationStack属性

阅读后，我发现自己更加困惑，而不是更少。再说一遍，这只是告诉我去做事情，而不是如何去做。从我的角度来看，那里的所有信息要么太含糊，要么只对已经了解该过程的人有意义。

以下@Jonathan Naguin的答案提出了其中一些更具体的问题。

查找内存泄漏的一个很好的工作流程是三种快照技术，Loreena Lee和Gmail团队首先使用它来解决他们的一些内存问题。这些步骤通常是：

• 拍摄堆快照。
• 做东西。
• 拍摄另一个堆快照。
• 重复同样的东西。
• 拍摄另一个堆快照。
• 在快照3的“摘要”视图中筛选在快照1和2之间分配的对象。

在您的示例中，我修改了代码以显示此过程（您可以在此处找到），以延迟“骨干视图”的创建直到“开始”按钮的click事件。现在：

• 运行HTML（使用此地址本地保存）并拍摄快照。
• 单击开始以创建视图。
• 拍摄另一个快照。
• 单击删除。
• 拍摄另一个快照。
• 在快照3的“摘要”视图中筛选在快照1和2之间分配的对象。

现在您已经准备好查找内存泄漏！

您会注意到一些不同颜色的节点。红色节点没有从Javascript到它们的直接引用，但由于它们是分离的DOM树的一部分，因此它们仍然有效。从Javascript引用的树中可能有一个节点（可能是一个闭包或变量），但同时防止了整个DOM树被垃圾回收。

但是，黄色节点确实具有Javascript的直接引用。在同一分离的DOM树中查找黄色节点，以查找Javascript中的引用。从DOM窗口到元素应该有一系列的属性。

在您的个人中，您可以看到标记为红色的HTML Div元素。如果展开该元素，您将看到“缓存”功能所引用的元素。

选择该行，然后在控制台中键入$ 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

这是您的元素被引用的地方。不幸的是，您无能为力，这是jQuery的内部机制。但是，仅出于测试目的，将功能更改为以下方法：

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

现在，如果您重复此过程，您将看不到任何红色节点：）

说明文件：

• 消除Gmail中的内存泄漏。
• 在Chrome DevTools中简化JavaScript内存分析。

这是有关jsfiddle内存配置的提示：使用以下URL隔离jsfiddle结果，它将删除所有jsfiddle框架并仅加载您的结果。

http://jsfiddle.net/4QhR2/show/

在阅读以下文档之前，我始终无法弄清楚如何使用时间轴和事件探查器来跟踪内存泄漏。阅读标题为“对象分配跟踪器”的部分后，我可以使用“记录堆分配”工具，并跟踪一些独立的DOM节点。

我通过从jQuery事件绑定切换为使用Backbone事件委托来解决了该问题。据我了解，如果您致电，较新版本的Backbone将自动为您取消绑定事件View.remove()。自己执行一些演示，它们设置有内存泄漏，供您识别。在学习了本文档之后，如果您仍然不明白，请随时在这里提问。

https://developers.google.com/chrome-developer-tools/docs/javascript-memory-profiling

基本上，您需要查看堆快照中的对象数。如果两个快照之间的对象数量增加，并且您已经废弃了对象，则可能会发生内存泄漏。我的建议是在代码中寻找不会分离的事件处理程序。

Google提供了一个介绍视频，这对于查找JavaScript内存泄漏非常有帮助。

https://www.youtube.com/watch?v=L3ugr9BJqIs

您也可以在开发人员工具中查看“时间轴”选项卡。记录应用程序的使用情况，并注意DOM节点和事件侦听器的数量。

如果内存图确实表明存在内存泄漏，则可以使用探查器找出泄漏的内容。

您可能还需要阅读：

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

它说明了chrome开发人员工具的用法，并提供了有关如何使用堆快照比较和可用的不同堆快照视图来确认和定位内存泄漏的逐步建议。

我第二次建议创建堆快照，它们非常适合检测内存泄漏，chrome可以出色地完成快照。

在我本人的研究项目中，我正在构建一个交互式Web应用程序，该应用程序必须生成在“层”中建立的大量数据，其中许多层将在UI中被“删除”，但由于某种原因，内存并未被删除。被释放，使用快照工具，我能够确定JQuery一直在对象上保留引用（源是当我尝试触发 .load()事件，尽管超出范围但仍保留了引用）。一手掌握这些信息就可以保存我的项目，当您使用其他人的库时，它是一个非常有用的工具，并且存在缠绵的引用使GC无法完成其工作的问题。

编辑：预先计划要执行的操作以最大程度地减少花在快照上的时间，假设可能导致问题的原因并测试每种情况，并在前后进行快照，这也很有用。

关于使用Chrome Developer工具识别内存泄漏的一些重要说明：

1）Chrome本身对于某些元素（例如密码和数字字段）存在内存泄漏。https://bugs.chromium.org/p/chromium/issues/detail?id=967438。避免在调试时使用它们，因为它们在搜索分离的元素时会污染您的堆快照。

2）避免将任何内容记录到浏览器控制台。Chrome不会垃圾收集写入控制台的对象，因此会影响您的结果。您可以通过在脚本/页面的开头放置以下代码来抑制输出：

console.log = function() {};
console.warn = console.log;
console.error = console.log;

3）使用堆快照并搜索“分离”以标识分离的DOM元素。通过将对象悬停，您可以访问所有属性，包括id和externalHTML，这些属性可能有助于标识每个元素。 如果分离的元素仍然过于笼统而无法识别，请在运行测试之前使用浏览器控制台为其分配唯一的ID，例如：

var divs = document.querySelectorAll("div");
for (var i = 0 ; i < divs.length ; i++)
{
    divs[i].id = divs[i].id || "AutoId_" + i;
}
divs = null; // Free memory

现在，当您确定带有分离元素时，可以说id =“ AutoId_49”，重新加载页面，再次执行上面的代码片段，然后使用DOM inspector或document.querySelector（..）查找id =“ AutoId_49”的元素。 。自然，这仅在页面内容可预测的情况下有效。

我如何运行测试以识别内存泄漏

1）加载页面（抑制控制台输出！）

2）在页面上做可能导致内存泄漏的操作

3）使用开发人员工具拍摄堆快照并搜索“分离”

4）悬停元素以从其id或externalHTML属性中识别它们