vue项目轮询页面内存不断增加直到浏览器崩溃问题记录

项目：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！