如何排查内存泄漏

工具：

1. Chrome[kroʊm]任务管理器

   用来粗略地查看内存使用情况。

   入口在右上角三个点 -> 更多工具 -> 任务管理器，然后右键表头 -> 勾选JS使用的内存，主要关注两列：

   1. 内存占用空间。表示原生内存，DOM节点存储在原生内存中，如果此值正在增大，则说明正在创建DOM节点；
   2. JS使用的内存。表示JS堆，此列包含两个值，需要关注的是实时值（括号中的数值）。实时数值表示页面上的可访问对象正在使用的内存量。如果该数值在增大，要么是正在创建新对象，要么是现有对象正在增长。

   

2. Chrome DevTools Performance面板

   用来观察内存变化趋势。

   入口在DevTools的Performance面板，然后勾选Memory，如果想看页面首次加载过程内存使用情况的话，Command + R刷新页面，会自动记录整个加载过程。想看某些操作前后的内存变化的话，操作前点“黑点”按钮开始记录，操作完毕点“红点”按钮结束记录。

   记录完毕后勾选中部的JS Heap，蓝色折线表示内存变化趋势，如果总体趋势不断上涨，没有大幅回落，就再通过手动GC来确认：再操作记录一遍，操作结束前或者过程中做几次手动GC（点“黑色垃圾桶”按钮），如果GC的时间点折线没有大幅回落，整体趋势还是不断上涨，就有可能存在内存泄漏。

   或者更粗暴的确认方式，开始记录 -> 重复操作50次 -> 看有没有自动GC引发的大幅下降，在使用的内存大小达到阈值时会自动GC，如果有泄漏的话，操作n次总会达到阈值，也可以用来确认内存泄漏问题是否已修复。

   PS：还能看到document数量（可能针对iframe），节点数量、事件监听器数量、占用GPU内存的变化趋势，其中节点数量及事件监听器数量变化也有指导意义。
   

3. Chrome DevTools Memory面板
   
   这个面板有3个工具，分别是堆快照、内存分配情况和内存分配时间轴：

   1. 内存分配时间轴（Record Allocation Timeline），用来查看实时的内存分配及回收情况。

      点开时间轴，对页面进行各种交互操作，出现的蓝色柱子表示新内存分配，灰色的表示释放回收，如果时间轴上存在规律性的蓝色柱子，那就有很大可能存在内存泄漏。

      然后再反复操作观察，看是什么操作导致蓝色柱子残留，剥离出具体的某个操作。
      

   2. 堆快照（Take Heap Snapshot），用来具体分析各类型对象存活情况，包括实例数量、引用路径等等；

      堆快照用来进一步分析，找到泄漏的具体对象类型。

      到这里应该已经锁定可疑的操作了，通过不断重复该操作，观察堆快照各项的数量变化来定位泄漏对象类型。

      堆快照有4种查看模式：

      Summary：摘要视图，展开并选中子项查看Object’s retaining tree（引用路径）；

      Comparison：对比视图，与其它快照对比，看增、删、Delta数量及内存大小；

      Containment：俯瞰视图，自顶向下看堆的情况，根节点包括window对象，GC root，原生对象等等；

      Dominators：支配树视图，新版Chrome好像去掉了，展示之前术语概念部分提到的支配树。

      其中最常用的是对比视图和摘要视图，对比视图可以把2次操作和1次操作的快照做diff，看Delta增量，找出哪类对象一直在增长。摘要视图用来分析这类可疑对象，看Distance，找出奇怪的长路径上，哪一环忘记断开了。

      看摘要视图有个小常识是新增的东西是黄底黑字，删除的是红底黑字，本来就有的是白底黑字，这一点很关键。
      

   3. 内存分配情况（Record Allocation Profile），用来查看分配给各函数的内存大小；
      

其中内存分配时间轴和堆快照比较有用，时间轴用来定位内存泄漏操作，对快照用来具体分析问题。