使用Chrome Profiles排查内存泄漏

概述

Heap Profiling是Google Chrome浏览器提供的JS调试工具。它可以记录当前的堆内存（heap）快照，并生成对象的描述文件。该描述文件给出了当时JS运行所用到的所有对象，以及这些对象所占用的内存大小、引用的层级关系等等。这些描述文件为内存泄漏的排查提供了非常有用的信息。

Heap Profiling使用

注：我的Chrome浏览器版本 58.0.3029.81

• 打开浏览器，打开要监视的网站，F12打开调试工具，在Memory中找到Profiles
• 选中Take Heap Snapshot后点击Take Snapshot，即可获得当前JS的heap快照
• 视图解释：
  1. 列字段：
     • Distance -- 估计是对象到根的引用层级距离
     • Objects Count -- 给出了当前有多少个该类的对象
     • Shallow Size -- 对象所占内存（不包含内部引用的其它对象所占的内存）(单位：字节)
     • Retained Size -- 对象所占总内存（包含内部引用的其它对象所占的内存）(单位：字节)
  2. 部分类名称：
     • (compiled code) -- 未知，估计是程序代码区
     • (closure) -- 闭包(array) -- 未知
     • Object -- JS对象类型(system) -- 未知
     • (string) -- 字符串类型，有时对象里添加了新属性，属性的名称也会出现在这里
     • Array -- JS数组类型cls -- 游戏大厅特有的继承类
     • Window -- JS的window对象
     • Quark.DisplayObjectContainer -- Quark引擎的显示容器类
     • Quark.ImageContainer -- Quark引擎的图片类
     • Quark.Text -- Quark引擎的文本类
     • Quark.ToggleButton -- Quark引擎的开关按钮类
• 查看对象内容：点击类名左边的三角形，可以看到所有该类的对象。对象后面的“@12345”表示的是该对象的ID（有人会错认为是内存地址，GC执行后，内存地址是会变的，但对象ID不会）。把鼠标停留在某一个对象上，会显示出该对象的内部属性和当时的值。这个视图有助于我们辨别这是哪个对象。但该视图跟踪不了是被谁引用了。
• 查看对象的引用关系：点击其中一个对象，能看到对象的引用层级关系。
• 点击左上角黑色实心圆圈按钮，可以再次得到新的内存快照，点击快照列表中的快照可以进行切换。
• 点击图中的Summary，可弹出一个列表，选择Comparison选项，这个视图列出了当前视图与上一个视图的对象差异。
  • 列名字段解释：# New -- 新建了多少个对象 # Deleted -- 回收了多少个对象 # Delta -- 对象变化值，即新建的对象个数减去回收了的对象个数Size Delta -- 变化的内存大小(字节)注意Delta字段，尤其是值大于0的对象。
  • 在“# New”列里，如果有“.”，则表示是新建的对象。
  • 在“# Deleted”列里，如果有“.”，则表示是回收了的对象。
• 排查结论：
  1. 当发现有Dom元素被标为黄色，此元素可能泄漏了，视具体情况而定。
  2. 当发现有Dom元素被标为红色，此元素极有可能发现泄漏了，因为它已经不在Dom树中，且没有变量引用，却依然占用内存，这时要看其根节点还有没有用，如果已经没用了就定为泄漏。
  3. 至于非Dom的内存泄漏需要你对程序代码很熟悉，然后逐个去找那些你怀疑的地方，看是否出现不该存在却存在的值。
• 几种常见的情况：
  1. 闭包上下文绑定后没有释放；
  2. 观察者模式在添加通知后，没有及时清理掉；
  3. 定时器的处理函数没有及时释放，没有调用clearInterval方法；
  4. 视图层有些控件重复添加，没有移除。

参考文章：JS内存泄漏排查方法(Chrome Profiles)、【内存泄漏】怎么用Chrome DevTool发现内存泄漏