Chrome开发工具 JavaScript 内存分析

键。最初快照是存在渲染内存中的，当你点击快照图标来查看它的时候，它将会被传输到 DevTools 中。当快照载入到 DevTools 中并被解析后，快照标题下面会出现一个数字，该数字表示所有可访问的 JavaScript 对象的总大小：示例：尝试使用这个例子来监测时间轴汇总内存的使用情况。清除快照点击清除全部配置图标()可以清楚快照（DevTools 中和渲染内存中都会删除掉）：注意：直接关闭 DevTools 窗口并不会删除渲染内存中的配置文件。当重新打开 DevTools 窗口的时候，所有之前生成的快照都会在快照列表中出现。记得之前文章中提到过，你可以从 DevTools 中强制进行垃圾回收，并且这可以成为你的快照工作流中的一部分。当生成一个堆快照的时候，DevTools 会自动进行垃圾回收。在时间轴中该过程可以通过点击垃圾桶按钮()轻松实现。示例：尝试这个例子并使用堆分析器来进行分析。你应该看到（对象）项目分配次数。在快照视图间切换一份快照可以用不同的视角来查看，这样可以更好地适应不同的需求。要在视图间切换，使用视图底部的选择器：一共有三种默认视图：总结 - 通过构造器的名称来分组显示对象比较 - 显示两份快照间的不同之处包含 - 允许查看堆中的内容在设置面板中可以启用主导视图 - 显示了主导树的内容，并且可以用于找到聚集点。查看代码颜色对象的属性以及属性值属于不同类型并且有着相应的颜色。每个属性都会有四种类型之一：a:property - 有名称的常规属性，通过 .（点）操作符或者 []（方括号）符号来访问，例如 ["foo bar"]；0:element - 有数字下标的常规属性，使用 []（方括号）来访问。a:context var - 函数上下文中的某个变量，在相应的函数闭包中使用其名字就可以访问。a:system prop - 由 JavaScript 虚拟机添加的属性，在 JavaScript 代码中无法访问。被命名为 System 这样的对象是没有相应的 JavaScript 类型的。他们是 JavaScript 虚拟机的对象系统的一部分。V8 将大多数内部对象分配到和用户 JS 对象相同的堆中，所以这些都只是 V8 内部内容。找到特定对象要在堆中找到某个对象，你可以使用 Ctrl + F 来打开搜索框，然后输入对象的 ID。视图的详细内容总结视图最开始的时候，快照是在总结视图中打开的，显示了对象的整体情况，并且该视图可以展开以显示实例信息：顶级入口是 "total" 行，他们展示了：构造器，表示所有用这个构造器创建的对象。对象实例的数量显示在 # 这一列下。Shallow size 这一列显示了当前构造器创建的所有对象的 shallow size 总和。Retained size 这一列显示相同的对象集所对应的最大 retained size。Distance 显示了从根节点开始，从节点的最短路径到达当前节点的距离。想上图那样展开 total line 之后，其所有的实例都会显示出来。对于每个实例，它的 shallow size 和 retained size 都会在相应列中展示出来。在 @ 字符后面的数字就是对象的 ID，该 ID 允许你在每个对象的基础上比较堆的快照。示例：通过这个页面来了解如何使用总结视图。请记住，黄色的对象表示有 JavaScript 对象引用了它们，而红色的对象是指从一个黄色背景节点引用的分离节点。比较视图这个视图用于比较不同的快照，这样，你就可以通过比较它们的不同之处来找出出现内存泄露的对象。想要弄清楚一个特定的程序是否造成了泄露（比如，通常是相对的两个操作，就像是打开文档，然后关闭它，是不会留下内存垃圾的），你可以尝试下列步骤：在执行操作前先生成一份快照。执行操作（该操作涉及到你认为出现内存泄露的页面）。执行一个相对的操作（做出相反的交互行为，并重复多次）。生成第二份快照然后将视图切换到比较视图，将它与第一份快照对比。在比较视图中，两份快照间的不同之处会展示出来。当展开一个总入口时，添加以及删除的对象实例会显示出来：示例：尝试这个例子（在选项卡中打开）来了解如何使用比较视图来监测内存泄露。包含视图包含视图本质上就像是你的应用程序对象结构的俯视图。它使你能够查看到函数闭包内部，甚至是观察到那些组成 JavaScript 对象的虚拟机内部对象，借助该视图，你可以了解到你的应用底层占用了多少内存。这个视图提供了多个接入点：DOMWindow objects - 这些是被认作“全局”对象的对象。GC roots - 虚拟机垃圾回收器实际实用的垃圾回收根节点。Native objects - 指的是“推送”到 JavaScript 虚拟机内以实现自动化的浏览器对象，比如，DOM 节点，CSS 规则（详细内容请见下一节）下面是常见的包含视图的例子：示例：通过这个页面（在新的选项卡中打开）来尝试如何在该视图中找到闭包和事件处理器。关于闭包的小提示为函数命名有助于你在快照中分辨不同的闭包。举个例子，下面这个函数没有命名：function createLargeClosure() { var largeStr = new Array(1000000).join('x'); var lC = function() { // this is NOT a named function return largeStr; }; return lC;}而下面这个是命名后的函数：function createLargeClosure() { var largeStr = new Array(1000000).join('x'); var lC = function lC() { // this IS a named function return largeStr; }; return lC;}示例：尝试一下这个例子来分析闭包对内存的影响。你可能会对下面这个例子感兴趣，它可以让你深入了解堆内存分配发现 DOM 内存泄露该工具的一大特点就是它能够显示浏览器本地对象（DOM 结点，CSS 规则）以及 JavaScript 对象间的双向依赖关系。这有助于发现因为忘记分离 DOM 子树而导致的不可见的泄露。DOM 泄露肯能比你想象中的要多。考虑下面这个例子 - 什么时候 #tree 会被回收？var select = document.querySelector; var treeRef = select("#tree"); var leafRef = select("#leaf"); var body = select("body");body.removeChild(treeRef); //#tree can't be GC yet due to treeRef treeRef = null; //#tree can't be GC yet due to indirect //reference from leafRef leafRef = null; //#NOW can be #tree GC#leaf 包含了对其父亲（父节点）的引用并递归到 #tree，所以只有当 leafRef 失效的时候 #tree 下的整棵树才能被回收。示例：尝试这个例子有助于你理解 DOM 节点中哪里容易出现泄露