记一次内存泄漏排查

记一次内存泄漏排查

起因：大屏反复建模在低内存电脑出现卡死

任务管理器，反复进入建模页退出，发现内存未释放，可能存在内存泄漏。

1、chrome-F12-内存（memory）面板，选择对快照，初始拍摄快照（也就是记录这一刻的内存使用情况）

2、进入大屏面板建模页，（该建模包含6个echarts图表）然后退出再进入若干次（这里进入退出10次）后，再次拍摄快照：

离开页面后，echarts应该被销毁，则正常情况下快照不应存在echarts。如图存在6*10个echarts对象，存在内存泄漏。

点击任意对象，查看引用情况：

寻找可疑引用，该引用与konva库有关，则查看代码，推测与konva实例未销毁有关。新增代码如下：

再次运行数次拍摄快照，发现echarts对象不再出现，则关于echarts的内存泄漏解决。

3、其他页面内存泄漏排查

在该页面（组件）自定义类，在创建时new该类实例

<script>
class TestOutMemoryAAA {}
export default {
  data() {

    return {
      test: null
    }
  },
  created() {
    this.test = new TestOutMemoryAAA()
  }
}

访问该页面（组件）后离开，拍摄快照，检索，若存在该类则说明该组件可能存在内存泄漏。

内存泄漏常见情况：1、闭包、定时器未销毁（置null）；2、addEventListener未对应使用removeEventListener；3、vue bus使用$on未对应使用$off。4、第三方插件生成实例可能需手动销毁而未销毁。