總覺得javascript滿處都是坑阿,一個不小心就掉進去了。 今天 Aidec 又遇到了一個坑,今天這個坑叫做內存洩漏 (memory leak)

最近在做一個類似期貨的金融模擬系統,所以跟一般的看盤系統一樣,會有個畫面不斷的接收即時報價。 (採用 vuejs + socket.io 長連線)


在之前一直沒有出現內存洩漏的問題,一直到了今天犯傻想將js腳本分離的乾淨一些,結果誤使用了全局變數,因此導致採坑啦。


一般來說,網頁都是加載讀取完畢後,就不會再做什麼動作,因此管它是否用了全局變數計時器還是閉包,能占用的記憶體都有限。

但是像是這種需要不斷接收實時資料的系統(例如:股票報價系統、監控系統),需要長時間將頁面掛著與不斷接收資料,就會出現內存洩漏的問題。


以我個人為例,僅僅是誤用全局變數就導致在5~10分鐘就吃掉了2G的記憶體 chrome 整個就崩潰了 ~~ 

而代碼的差異僅一小段而已

正常代碼

$(function(){  
    //實例-初始化vue
    var vm = new Vue({
        //對應的視圖區域
        el : '#vueApp', 
        //資料 model
        data: {
           someObj :{
              ....
           }
        }
  });
});

會內存洩漏的錯誤代碼         

$(function(){  
    var ml = { ... };  //全局變數
    //實例-初始化vue
    var vm = new Vue({
        //對應的視圖區域
        el : '#vueApp', 
        //資料 model
        data: {
           someObj :ml //使用全局變數
        }
  });
});

是的,就是改了這麼一小段,整個結局就不同了。 

好吧,這篇就寫到這邊了,對於內存洩漏本身也不是很了解,就不多寫免得誤了大家。


參考文章: 4类 JavaScript 内存泄漏及如何避免


補充 

更新時間 :2017.05.26 AM10:56


後來發現事情沒這麼簡單,不只全局變數會造成此問題,就連使用vuejs 當中的 v-model 、@click 、 @change  都會使記憶體不斷的增加,

雖然有時會釋放一些,但釋放的量遠低於增加的量,長時間下來還是會導致記憶體用盡... 只能暫時不用 vuejs 



補充2

更新時間 : 2017.11.06 AM10:03

在上周使用vuejs又遇到memory leak,後台在vue github 的 issue 發現到也有人有 memory leak 的問題,根據裡面開發者的回應

在早期版本有bug,但在新版本已修復。立馬下載更新vue 2.5.3的版本,果然問題立即解決了! (原本的版本是 2.0.5 會有問題)


結論

這篇感覺變成一篇抱怨文了 .... 








文章轉載或引用,請保留原文出處!!3Q