内存泄露是指系统中的垃圾内存无法被回收，造成系统消耗的内存越积越多，给系统带来严重的负荷，长时间操作后可能会引起系统内存不足、页面无法响应、浏览器崩溃等严重现象。
一、如何发现内存泄露
- 任务管理器：操作页面后观察任务管理器中chrome浏览器所占用的内存是否一直在提升
- chrome浏览器调试工具：使用Memory标签下的Snapshot，生成堆快照，比对操作前后的快照的大小
二、Snapshot操作方法
讲一下Snapshot具体的操作方法，假如现在发现页面A可能存在内存泄露，那么我们的操作如下：
在进行操作之前有两点需要注意：
- 如果是webpack工程，需要关闭HMR功能
- 用chrome的无痕模式访问页面，无痕模式下会屏蔽chrome插件带来的影响
具体操作步骤：
-
在工程中准备一个空白页面B(或者一个已经存在的简单的页面B，你认为不可能产生内存泄露的页面)；
-
进入页面A，等待页面加载完成后，点击Chrome devTools - Memory页签的Collect garbage图标，等待数秒后，点击Take snapshot生成快照
-
进入页面B
-
再次进入页面A，等待页面加载完成后，点击Chrome devTools - Memory页签的Collect garbage图标，等待数秒后，再次点击Take snapshot生成快照
-
如果两次生成的快照大小不一致，则说明页面A存在内存泄露
三、分析泄露点
在发现页面上有内存泄露之后，要如何定位到发生泄露的代码呢？
Snapshot提供了对比的功能，可以对比两个快照之间的差异
如上图所示，选中第二个snapshot，然后选择Comparison，将其与snapshot1进行对比，将对比的结果按照Size Delta排序。
我们点开之后发现该数据指向的是echarts相关，在代码中找echarts相关的代码，发现问题所在了：在使用echarts后没有手动销毁。
我们加入销毁echasrts实例的代码
再次运用snapshot查看堆内存变化。
可以发现，内存的增长显著减少，之前切换一次会增长6M左右，现在只有0.7M。
四、Tips
如果你使用上述方法无法找到泄漏点，可以采用经典的二分法来定位。所谓二分法是指将页面上一半的代码注释掉，看剩余的一半代码会不会引发内存泄露，经过几次划分，应该就可以定位到内存泄露的地方了。
