最近做的項目需要在頁面上展示echarts圖表，且數據每隔10s刷新一次，然后發現時間長了以后chorme瀏覽器會顯示頁面崩潰。一開始以為是定時器的原因，試了網上的很多方法，比如把setInterval改成setTimeout，及時清除定時器，設置為null釋放內存等，甚至還有在get請求的參數里加上時間戳……發現都沒有作用，頁面依然崩潰。最后發現是echarts的問題。（內存泄漏可用chorme瀏覽器的memory排查，具體排查方法可以在網上搜到）
通過init方法創建echarts實例，如果不及時清理就會越來越多，占用大量內存，有兩種方法可以避免這種情況：一種是在init之前先判斷echarts實例是否存在
var chart if (chart == undefined) { chart = echarts.init(document.getElementById(dom)); }
另一種方法是在init之前銷毀已經存在的echarts實例，可用clear()和dispose()手動清理變量，區別是clear()不會銷毀實例，只是重新繪制圖形，而dispose()會銷毀實例，需要重新構建ECharts對象
var chart if (chart) { echarts.dispose(chart) chart = echarts.init(document.getElementById(dom)) }
本來以為這樣就ok了，過段時間切回來一看又崩潰了，詭異的是停留在當前頁面查看內存一直沒有漲，切換到其他網頁再回來看從一個很高的內存又降到了正常值，相當於你看着它它不漲，不看它的時候一直在漲。。后來才知道chrome瀏覽器只有打開頁面，內存才會釋放，那么問題來了，如果我們想長時間查看其他頁面，仍在后台運行的echarts頁面很可能悄無聲息地崩潰了。因此我們需要在切換到其他頁面時停止自動刷新，切回來時再開啟，那么有沒有什么瀏覽器事件能在切換頁面時被觸發呢？答案是有的：
瀏覽器標簽頁被隱藏或顯示的時候會觸發visibilitychange事件 (可參考 https://www.jianshu.com/p/e905584f8ed2）
我們可以監聽visibilitychange事件，頁面隱藏時清除定時任務，頁面顯示時重新開啟定時任務。
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// 清除定時任務
} else {
// 開啟定時任務
}
});
這樣就不會發生切換到其他頁面后echarts頁面崩潰的情況了。
參考文章：