1分鐘快速排查內存泄漏

內存泄漏的緣由

是指程序中己動態分配的堆內存因爲某種緣由未釋放或沒法釋放,那麼爲何沒有釋放呢(1.根據JS的垃圾回收機制，當內存中引用的次數爲0的時候內存纔會被回收 , 2.從根部出發觸及到的對象被標記爲再也不使用纔會被釋放）

內存泄漏的幾種狀況

• 全局變量：全局變量引用、變量未申明
• 閉包：內層函數的變量對外層函數內的變量存在引用，閉包未獲得釋放，可能會致使內存泄漏
• 事件監聽未移除：重複監聽
• 緩存：緩存未清除致使，因此設置個緩存最大值

如何避免？

• Eslint檢測非指望的全局變量
• 儘可能少寫複雜閉包
• 綁定時間在Destroy的時候記得清除

如何解決？

heapdump打快照，memory看內存快照

泄漏前，泄漏中，經過Delta對比對象變化

閉包致使的案例

function Foo(){
            var stage = []
            setInterval(() => {
                debugger
                this.data = {
                    name: 'wbczxxxxxxxxxxxxxxxxxx',
                    hobby: {
                        phone: '11'
                    },
                }
                stage.push(this.data)
            });
        }
        const foo = new Foo()複製代碼

若是你還不能確認是閉包致使的問題，經過調試工具右下角能夠發現造成了閉包

打快照發現，Js Arrays對象內存明顯上升

又經過Delta發現，array數組下的對象的個數在遞增，經過對象的key值，能夠定位到具體代碼，進而定位到因爲閉包引發對外層變量的引用，內存未釋放

另外若是是瀏覽器裏能夠經過Performance也能夠查看內存堆隨時間的變化

最後插播一則小廣告～