项目:vue + element UI + axios
崩溃页面:定时查询新数据渲染表格
崩溃时间:>12小时后(后期数据变多时,时间缩短,内存增加的更快
崩溃现象:通过network的Memory内存快照观察到,每请求一次内存就会增加一次(数据越多,增加的就越多),且内存很少会降回去,以至于随着请求的不断增加,内存持续增加。
解决办法:
1、根据网上关于“浏览器崩溃”“内存增加”等问题的搜索,得知有可能是内存泄漏。
于是去寻找内存泄漏的可能因素。
(1、DOM节点渲染
(2、v-if
对应改掉之后,略有好转,但是效果不明显。
继续摸索
2、根据Memory中观察到,有可能是axios请求的对象没有销毁,每请求一次都创建了一个实例。
原本的接口调用方式如下:
const service = axios.create({ timeout: 60000 // request timeout }) service.interceptors.request.use( config => {return config }, error => { console.log(error) // for debug return Promise.reject(error) } )
通过axios.create创建实例。
于是改成直接在页面中请求接口。
axios.post(url, params).then(res => {})
测试有效,内存增加变慢了。但是仍然会持续增加。
3、最后聚焦代码,观察轮询会执行的那部分代码,减少变量,并去掉所有的console(因为某种原因,需要在接口调用的时候加入当前时间的打印,以便观察每一次接口请求的时间间隔)。
最后发现,内存虽然会增加,但是在一段时间后会降落回去,整体保持在一个固定范围内,不会出现浏览器崩溃的现象。
因此,造成内存增加的主要原因有二,一是轮询时对当前时间的打印,二是axios接口请求。
over!