前言
一个愉快的下午,我在快乐的摸鱼。组内同事在群里求助问题如下:一个平平无奇的Vue+element-ui后台竟然在切换路由的时候导致页面崩溃了?!
问题复现
听完问题的描述我就来了兴趣,很快啊~git clone—>npm install---->npm run dev我就把项目跑了起来,但是我在开启内存监控的情况下本地切换了好几次路由并没有复现,就在我以为是一个偶现问题的时候,测试小哥甩来了一个测试环境的线上链接。我随便一点页面内存占用就轻轻松松上了1G!,虽然啪啪打了我的脸,但是我为这是一个必现问题(今晚不用加班)而感到开心。不过在开心之余我马上记录下了这个Bug的第一个关键信息:在线上环境比开发环境更容易复现这个问题(意味着我们接下来的排查工作要重点关注,开发环境和测试环境的区别)
问题定位
我们既然已经复现了问题了,那接下来就赶紧着手解决吧!
1、打开chrome的任务管理器或者控制台的Memory选项查看当前页面的内存占用情况(尽量切换到无痕模式下,防止插件对当前的页面内存造成干扰)
方式1、
方式2、2、打印快照,对内存占用情况进行分析,可以看出我这个内存占用情况很不合理,正常都应该是代码所占最大,然后是数组和对象之类的,但我这个竟然是字符串所占内存最大,而且在频繁切换了路由之后字符串所占内存大小也是一路飙升,所以我们就从他下手
这里有几个关键信息值得我们留意一下首先就是距离