记录一次内存泄漏导致页面崩溃的排查过程

前言

一个愉快的下午，我在快乐的摸鱼。组内同事在群里求助问题如下：一个平平无奇的Vue+element-ui后台竟然在切换路由的时候导致页面崩溃了？！

问题复现

听完问题的描述我就来了兴趣，很快啊～git clone—>npm install---->npm run dev我就把项目跑了起来，但是我在开启内存监控的情况下本地切换了好几次路由并没有复现，就在我以为是一个偶现问题的时候，测试小哥甩来了一个测试环境的线上链接。我随便一点页面内存占用就轻轻松松上了1G！，虽然啪啪打了我的脸，但是我为这是一个必现问题(今晚不用加班)而感到开心。不过在开心之余我马上记录下了这个Bug的第一个关键信息：在线上环境比开发环境更容易复现这个问题（意味着我们接下来的排查工作要重点关注，开发环境和测试环境的区别）

问题定位

我们既然已经复现了问题了，那接下来就赶紧着手解决吧！
1、打开chrome的任务管理器或者控制台的Memory选项查看当前页面的内存占用情况（尽量切换到无痕模式下，防止插件对当前的页面内存造成干扰）
方式1、
方式2、2、打印快照，对内存占用情况进行分析，可以看出我这个内存占用情况很不合理，正常都应该是代码所占最大，然后是数组和对象之类的，但我这个竟然是字符串所占内存最大，而且在频繁切换了路由之后字符串所占内存大小也是一路飙升，所以我们就从他下手

这里有几个关键信息值得我们留意一下首先就是距离