一、內(nèi)存的儲存和代碼執(zhí)行的場所關(guān)系

對于任何語言來說，內(nèi)存管理、垃圾回收等知識都是進階路上繞不開的坎。出來面試估計也沒少被問到“前端的內(nèi)存處理你了解么？ 你知道js中的垃圾處理機制嗎？ 什么情況會導(dǎo)致內(nèi)存泄漏呢？

1. 儲存空間

兩種結(jié)構(gòu)：

• 棧空間：
• 存儲原始類型
• 執(zhí)行上下文 （代碼空間：主要存儲可執(zhí)行代碼）
• 堆空間：存儲引用類型

為什么不都用棧存呢？

因為需要用棧來維護程序執(zhí)行期間上下文的狀態(tài)，如果?？臻g大了話，所有的數(shù)據(jù)都存放在棧空間里面，那么會影響到上下文切換的效率，進而又影響到整個程序的執(zhí)行效率。

2. 內(nèi)存的生命周期

內(nèi)存分配：聲明變量、函數(shù)、對象的時候 內(nèi)存的使用：讀寫內(nèi)存，使用變量 函數(shù)等 內(nèi)存回收：使用完畢，由垃圾回收機制自動回收不再使用的內(nèi)存

3. js 中的內(nèi)存分配和使用

// 分配
const num = 123;  // 分配到棧
const str = 'sss';// 分配到棧
const obj = {};   // 分配到堆
// 使用
const a = 10;
console.log(a); // 使用

4. 調(diào)用棧下移ESP(記錄當前執(zhí)行狀態(tài)的指針)

當一個函數(shù)執(zhí)行結(jié)束之后，JavaScript 引擎會通過向下移動 ESP 來銷毀該函數(shù)保存在棧中的執(zhí)行上下文。 比方下面這個例子通過ESP 狀態(tài)來展示就如圖所示。

var foo1 = () => {
    console.log('foo1')
    foo2()
}
var foo2 = () => {
    console.log('foo2')
}
foo1()

被ESP指針移開后的函數(shù)作用域foo1 明顯屬于不在被引用，后續(xù)將會直接被GC回收

二、 js中的垃圾回收機制

有C語言經(jīng)驗的開發(fā)者，一定明白內(nèi)存聲明分配好之后，需要手動 free 的操作，這就是手動回收。而 Js 本身是自動回收機制，所以開發(fā)者不需要過多關(guān)注內(nèi)存分配和釋放的問題。這些工作都讓 V8 引擎中的垃圾回收器（GC）給承包了。

最早接觸 js 的時候，市面上對于 js 內(nèi)存管理、垃圾回收主要講的是下面兩種概念：

1. 引用計數(shù)法

引用計數(shù)法的算法主要依賴于引用的概念，這個回收機制最早是在 IE 在使用的。目前主流瀏覽器都使用標記清除法了。看一個對象是否有指向他的引用，如果沒有其他對象指向他了，說明當前這個對象不再被需要了。

他的缺陷在于：循環(huán)引用

如果兩個對象相互引用，盡管他們已不再被使用，但是引用計數(shù)無法識別，導(dǎo)致內(nèi)存泄漏。

2. 標記清除法（Mark-Sweep）

將“不再使用的的對象”定義為“無法到達的對象”

從根部js的全局對象觸發(fā)，定時遞歸掃描內(nèi)存中的對象，凡是無法從根部到達的對象，就會被標記為不再使用，稍后進行回收。

執(zhí)行過程如下：

• GC在運行的時候會給內(nèi)存中的所有變量都加上標記
• 將從根部觸發(fā)能夠觸及到的對象標記清除
• 剩下的還有標記的變量被視為準備刪除的變量
• GC銷毀帶有標記的值 回收內(nèi)存空間

三、代際假說和分代收集

代際假說（The Generational Hypothesis）是現(xiàn)代瀏覽器垃圾回收策略的基礎(chǔ)。整個模型可以看看下圖

新生代（副垃圾回收器）

存放的是生存時間短、占用空間較小的的對象，通過 Scavenge 算法，是把新生代空間對半劃分為兩個區(qū)域，一半是對象區(qū)域，一半是空閑區(qū)域。新的對象都要放到對象區(qū)，當快滿的時候，將還存活的對象復(fù)制到空閑區(qū)后進行角色互換。并且執(zhí)行對象晉升策略，對象區(qū)域和空閑區(qū)域翻轉(zhuǎn)兩次還存在的對象，升級到老生代。這個復(fù)制翻轉(zhuǎn)的過程也避免內(nèi)存碎片的產(chǎn)生。

老生代（主垃圾回收器）

存放的生存時間久的對象或者大的對象，使用標記清除的算法進行垃圾回收。一旦執(zhí)行垃圾回收算法，都需要將正在執(zhí)行的 JavaScript 腳本暫停下來，待垃圾回收完畢后再恢復(fù)腳本執(zhí)行。這種行為稱為全停頓（Stop-The-World）。實際上瀏覽器為了避免垃圾回收卡頓通過增量標記方式將回收任務(wù)拆解成多個小任務(wù)穿插在js主線程中執(zhí)行。

四、常見的內(nèi)存泄漏

1. 全局變量

function foo() {
    bar1 = 'aaa'; // 相當于聲明在window.bar1
    this.bar2 = 'aaaa'
}
foo(); // 執(zhí)行函數(shù)事this指向window ,相當于一個函數(shù)給全局變量增加了兩個變量

2. 未被清理的定時器和回調(diào)函數(shù)

//setInterval
//setTimeout
setInterval(() => {
    console.log('test')
}, 500)
//沒用用 clearInterval clearTimeout 做清除

3. 閉包

個人最喜歡《你不知道的js》里對閉包的描述

一個內(nèi)部函數(shù)，有權(quán)訪問包含其的外部函數(shù)的變量 —— 《你不知道的js》 或者也可以用“內(nèi)存逃逸”這種高逼格的屬于形容。

// 閉包 gc 案例
var one = null;
var replace = function() {
    var originalOne = one;
    var unused =function() {
        if(originalOne) {
            console.log(111);
        }
    }
    one = {
        longString: '111',
        method: function() {
            console.log()
        }
    }    
}
setInterval(replace, 500)

每次調(diào)用 replace, one 得到一個包含字符串和一個對于新閉包 method 的對象 unused 引用了 originOne

5. DOM 引用

var elements= {
    image: document.getElementById('111');
}
elements.image = null;

6. 怎么避免呢？

• 盡量減少全局變量

//盡可能少寫
window.object = {} // 這類代碼

• 使用完引用數(shù)據(jù)后，及時解除引用.null

let obj = {}
...
obj = null;

• 避免死循環(huán)等持續(xù)執(zhí)行的操作(例如 邊界判斷不清晰的 for 或 while 循環(huán))
• 多使用 WeakSet / WeakMap 特性

// Vue3 中就大量用了WeakMap 優(yōu)化實例引用
const bucket = new WeakMap();
...
const obj = new Proxy(data, {
  get(target, key) {
    track(target, key);
    return target[key];
  },
  set(target, key, newVal) {
    target[key] = newVal;
    trigger(target, key);
  },
});
function track(target, key) {
  if (!activeEffect) return;
  let depsMap = bucket.get(target);
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map()));
  }
  // 再根據(jù)key 從 depsMap 中取得 deps, 它是一個 Set 類型，里面存儲著左右與當前 key 相關(guān)聯(lián)的副作用函數(shù)： effects
  let deps = depsMap.get(key);
  // 如果 deps 不存在，同樣新建一個 Set 并與 key 關(guān)聯(lián)
  if (!deps) {
    depsMap.set(key, (deps = new Set()));
  }
  deps.add(activeEffect);
  activeEffect.deps.push(deps);
}
...

參考

【1】 《瀏覽器工作原理與實踐》

【2】 一文搞懂垃圾回收

以上就是JS前端的內(nèi)存處理的方法全面詳解的詳細內(nèi)容，更多關(guān)于JS前端內(nèi)存處理的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論