總覺得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 會有問題)
結論
這篇感覺變成一篇抱怨文了 .... 
文章轉載或引用，請先告知並保留原文出處與連結！！(單純分享或非營利的只需保留原文出處，不用告知)
原文連結:
https://blog.aidec.tw/post/javascript-memory-leak
若有業務合作需求，可寫信至： opweb666@gmail.com
創業、網站經營相關內容未來將發布在 小易創業筆記