[[343125]]

小鹿  本文轉(zhuǎn)載自微信公眾號「小鹿動畫學編程」，作者小鹿  。轉(zhuǎn)載本文請聯(lián)系小鹿動畫學編程公眾號。 

在實際項目中，像內(nèi)存泄漏、遞歸爆棧等這樣的問題，對于一個前端來說，屬于家常便飯了，你會經(jīng)常遇到的。遇到了，也別慌，從原理開始分析造成問題的原因，這篇文章會結(jié)合實戰(zhàn)來由淺入深的分享內(nèi)存泄漏那些事。

老大，不好了，我頁面卡死了，線上項目內(nèi)存飆到了 3萬多 M 測試小姐姐在呼喚我們老大。3萬多 M 所指是瀏覽器內(nèi)存占用空間如下圖所示的地方。

為了處于好奇，我就過去瞅了一眼，整個頁面處于卡死狀態(tài)，內(nèi)存飆到這么高，肯定是長時間運行項目，程序中有些占用的內(nèi)存無法得到回收，導(dǎo)致了內(nèi)存不斷的泄漏，最終頁面出現(xiàn)卡死狀態(tài)。

什么是內(nèi)存泄漏?

一句話總結(jié)，不再用到的內(nèi)存，沒有及時釋放，就叫做內(nèi)存泄漏。

當內(nèi)存泄漏時，內(nèi)部是通過垃圾回收機制來解決的，但是不同語言的垃圾回收策略不通，有的語言自動可以管理內(nèi)存，比如 JavaScript;有的語言卻需要手動的去釋放，比如 C 語言。

舉個例子：

char *p = (char*)malloc(10); // 常見 10 個字節(jié)區(qū)域在堆區(qū) 
2 
3free(p);//釋放 

什么造成內(nèi)存泄漏?

內(nèi)存存儲數(shù)據(jù)無非最常用的是兩種數(shù)據(jù)結(jié)構(gòu)，分別是棧和堆，還有一種不常打交道的池結(jié)構(gòu)。

內(nèi)存泄漏無非就是棧內(nèi)存和堆內(nèi)存，這個在文章后邊會展開分析。先說說在 JS 中，是什么原因會造成內(nèi)存的泄漏?

在 JS 中，內(nèi)存泄漏是指我們已經(jīng)無法再通過 js 代碼來引用到某個對象，但垃圾回收器卻認為這個對象還在被引用，因此在回收的時候不會釋放它。導(dǎo)致了分配的這塊內(nèi)存永遠也無法被釋放出來。如果這樣的情況越來越多，會導(dǎo)致內(nèi)存不夠用而系統(tǒng)崩潰。

嗯，這樣以來，確實和我上邊在實戰(zhàn)中所提到的情況差不多。為了更好的去了解如何查看是否是內(nèi)存泄漏，我去網(wǎng)上搜集了一些檢測內(nèi)存泄露的方法。

如何檢測內(nèi)存泄漏?

第一種方式，我們可以使用任務(wù)管理器去查看程序的占用情況。在谷歌瀏覽器種，打開設(shè)置 —> 更多工具 —> 任務(wù)管理器。

第二種方式，適合程序執(zhí)行的時候，那個階段內(nèi)存的占用情況。

打開谷歌控制臺，切換到 Preformance 面板，在 Memory 復(fù)選框打勾，點擊左上角的開始或者刷新按鈕，我在上圖標出的紅色區(qū)域就是內(nèi)存的在每個階段的實時占用情況。

如果內(nèi)存的占用情況基本穩(wěn)定，那么說明不存在內(nèi)存泄漏的情況，如果內(nèi)存隨著時間的推移，不斷的進行上升，說明內(nèi)存有泄漏的可能。

垃圾回收機制

對于 JS 的垃圾回收機制，主要做三件事，分別是標記、回收、整理。

標記的是用不到的內(nèi)存，回收的是已標記的內(nèi)存，整理的是回收后的零碎不連續(xù)的內(nèi)存空間。

那么回收的棧內(nèi)存和堆內(nèi)存，垃圾回收器是如何進行不同的方式進行回收的呢?

首先我們要知道棧內(nèi)存和堆內(nèi)存分別存儲是什么類型的數(shù)據(jù)，分別是怎樣存儲的，這個在小冊子中具體也提到過，如下(不理解的建議可以先看小冊子內(nèi)容)：

1、棧內(nèi)存的數(shù)據(jù)如何被回收的?

我們知道，程序的執(zhí)行遇到函數(shù)是在調(diào)用棧中依次入棧執(zhí)行的，每個函數(shù)都有一個執(zhí)行上下文環(huán)境，當函數(shù)執(zhí)行完成，該函數(shù)的執(zhí)行上下文就會出棧，因此，存在每個執(zhí)行上下文環(huán)境中的棧內(nèi)存中的變量也會被釋放。

舉個例子，如下代碼：

function fn1(){ 
   let num = 1; 
  let obj1 = {name:"小鹿"} 
   function fn2() { 
     let str = "xiaolu"; 
     let obj2 = {name:" 小鹿動畫學編程"} 
   } 
   fn2(); 
 } 
fn1(); 

執(zhí)行示意圖如下：

不對，你說清楚，出棧的這塊執(zhí)行上下文中的棧內(nèi)存如何銷毀的?難道出棧就銷毀了嗎?雖然是出棧了，那塊內(nèi)存確實還存在調(diào)用棧中呀?

沒錯，確實這塊內(nèi)存并沒有銷毀，而是變成了無效的內(nèi)存的狀態(tài)。當另一個函數(shù)的執(zhí)行上下文進入調(diào)用棧的時候，就會把這個無效內(nèi)存給覆蓋掉，那么我們認為之前存在的棧內(nèi)存被銷毀或者重新利用了。

2、堆內(nèi)存中的數(shù)據(jù)如何回收?

上邊講到的棧內(nèi)存，根本用不到咱們的垃圾回收器，因為它會被下一個執(zhí)行上下文的函數(shù)所覆蓋或者說重新利用起來。

但是不要忘記，在堆內(nèi)存中，大多數(shù)存儲的是引用類型，而引用類型的地址是存儲在棧內(nèi)存中，棧內(nèi)存這時候已經(jīng)銷毀，無法引用到該引用類型，那么這個無法引用這塊堆內(nèi)存空間又是如何銷毀和回收的呢?

這不得不派出我們 V8 的垃圾回收器了。但是在堆內(nèi)存中，V8 主要分把堆內(nèi)存為兩塊區(qū)域，分別為新生代區(qū)域和老生代區(qū)域，咱們先主要了解一下這兩塊區(qū)域是干嘛的。

新生代區(qū)域主要存放時是存放時間比較短的而且占用內(nèi)存比較小引用類型數(shù)據(jù)，而老生代區(qū)域存放時間比較長占用內(nèi)存比較大的引用類型數(shù)據(jù)。而且新生代區(qū)域占據(jù)的內(nèi)存比較小，反而老生區(qū)占用的內(nèi)存很大。

所以呢，V8 引擎不得不用兩個垃圾回收器分別回收對應(yīng)區(qū)域無效數(shù)據(jù)。

對于垃圾回收機制的執(zhí)行過程，小冊也具體寫到。

但是具體如何進行標記和回收的沒有提到過，先看看新生代區(qū)域的垃圾數(shù)據(jù)是如何回收的。

具體的回收過程如下：

原視頻

從以上動畫中，可以看出，新生代區(qū)域被一分為二，一邊存放的是數(shù)據(jù)(稱它為 Form 空間)，另一邊是空閑區(qū)域(稱它為To空間)。當數(shù)據(jù)區(qū)域空間快被占滿的時候，就會執(zhí)行一次垃圾回收機制。

對用不到的數(shù)據(jù)進行打標記。然后將沒有被標記的數(shù)據(jù)進行復(fù)制到 To 空間，然后對標記的數(shù)據(jù)進行回收，回收之后 Form 空間就沒有任何數(shù)據(jù)了，然后兩個空間位置就會互換，To 空間就變成了 Form 空間，而此時有數(shù)據(jù)的成為了 To 空間。

此時用到的數(shù)據(jù)在復(fù)制的過程中已經(jīng)被整理好，那么新生代區(qū)域的垃圾回收是這樣進行回收的，再次進行垃圾回收的時候，會依次執(zhí)行上述的動畫。這個垃圾回收算法被稱為 Scavenge 算法。

然而這個算法并不適合老生區(qū)域的數(shù)據(jù)回收，我們上邊提到，老生區(qū)域數(shù)據(jù)的特點，數(shù)據(jù)占用內(nèi)存大，當我們復(fù)制的時候，非常耗時，這也是為什么只有新生代區(qū)域設(shè)置空間小的原因，為了保證垃圾回收的執(zhí)行效率嘛。

在老生代區(qū)域，垃圾回收機制使用的是標記-清除法。

我們先來說說如何進行對可回收的數(shù)據(jù)如何標記的，首先我們從一個根數(shù)據(jù)開始進行一次循環(huán)遍歷，看看哪些數(shù)據(jù)對象沒有被引用使用到。然后要進行標記，當下次進行垃圾回收的時候?qū)擞浀膶ο筮M行銷毀。

那么問題來了，經(jīng)過幾次垃圾回收之后，雖然這些沒有被引用到的數(shù)據(jù)銷毀了，但是內(nèi)存中的空間很零碎，連續(xù)的內(nèi)存空間逐漸變小，比如我們想聲明連續(xù)一塊比較大的內(nèi)存空間的時候，突然發(fā)現(xiàn)內(nèi)存都是零碎的，從而會導(dǎo)致申請失敗，那我們改怎么辦呢?

那么以上的標記-清除法子就不管用了，V8 引擎垃圾回收是這么改進的。

原視頻

當進行從根元素進行遍歷的時候，發(fā)現(xiàn)可以被引用到的數(shù)據(jù)我們就將它進行移動到頭部位置，然后依次排列，最后末尾剩下的都是引用不到的數(shù)據(jù)，也就是我們所說的要回收的數(shù)據(jù)，我們一次性進行回收，同時我們已存在的對象也已經(jīng)在內(nèi)存中被整理好了。

小結(jié)

以上就是我們今天所有內(nèi)容了，總結(jié)一下。

我們由淺入深的了解了一下內(nèi)存泄漏的問題，以及如何查看內(nèi)存泄漏。

分別從棧內(nèi)存和堆內(nèi)存角度用動畫形式分享了 V8 的兩種垃圾回收機制算法。

最后，思考一個問題，JavaScript 是單線程的，在執(zhí)行垃圾回收較大的對象時，V8 是如何解決的頁面卡頓問題呢?