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！