vue路由切换内存不释放

vue 内存泄漏排查

1.内存泄漏(Memory Leak)：不再用到的内存，没有及时释放；

2.内存溢出(Out Of Memory)：应用系统中存在无法回收的内存或使用的内存过多，最终使得程序运行要用到的内存大于能提供的最大内存。

泄漏原因

1.js写法（闭包、全局变量等）、dom事件监听、循环定时器等这些造成的泄漏；

2.组件的泄漏（DOM泄漏即DOM无法销毁）导致DOM上挂载的事件，对象数组等的数据也跟着无法释放。

百度推荐两种方法

1.performance打快照

点击快照之前要点击垃圾回收

使用对比可以看到第一次和第二次快照不同地方

Chrome开发者工具中Memory功能排查，你会发现怎么每个组件都存在内存泄漏，导致无从下手

这时候我们就要采用排除法来找出泄露点，之前说过是切换主菜单时发生内存泄漏，那首先把每个菜单页面内容全注释，再切换主菜单，经测试没有内存泄漏。

2.memory时间轴查看未释放内存

要注意VueComponent的泄漏值，因为VueComponent是会挂载对象、数据、事件的，所以那些Object Array产生泄漏值也很大可能是VueComponent造成的。所以我们在处理泄漏的时候最好是先保证VueComponent的泄漏值为0. 然后再去往js闭包、循环定时器、事件监听那些方向去检查。



3.Allocation sampling - 内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。（网上没有这方面操作的截图）

从网上的文章上来看交了我很多，但是熟悉了那些步骤之后还是无法判断是哪里有问题。都是到了这一步就发现了问题。