不知道在座的各位有沒有被問到過這樣一個問題：如果頁面卡頓，你覺得可能是什么原因造成的,？有什么辦法鎖定原因并解決嗎,？

這是一個非常寬泛而又有深度的問題,，他涉及到很多的頁面性能優(yōu)化問題，我依稀還記得當初面試被問到這個問題時我是這么回答的：

1. 先會檢查是否是網絡請求太多,，導致數據返回較慢,，可以適當做一些緩存
2. 也有可能是某塊資源的 bundle 太大，可以考慮拆分一下
3. 然后排查一下 js 代碼,，是不是某處有過多循環(huán)導致占用主線程時間過長
4. 瀏覽器某幀渲染的東西太多,，導致的卡頓
5. 在頁面渲染過程中，可能有很多重復的重排重繪
6. emmmmmm....不知道了

后來了解到了,，感官上的長時間運行頁面卡頓也有可能是因為內存泄漏引起的

- 1 -

內存泄漏的定義

那什么是內存泄漏呢,？借助別的大佬給出的定義，內存泄漏就是指由于疏忽或者程序的某些錯誤造成未能釋放已經不再使用的內存的情況,。簡單來講就是假設某個變量占用 100M 的內存,，而你又用不到這個變量，但是這個變量沒有被手動的回收或自動回收,，即仍然占用 100M 的內存空間,，這就是一種內存的浪費，即內存泄漏

- 2 -

JS 的數據存儲

JavaScript 的內存空間分為棧內存和堆內存,，前者用來存放一些簡單變量,，后者用來存放復雜對象

• 簡單變量指的是 JS 的基本數據類型，例如：String,、Number,、Boolean、null,、undefined,、Symbol、BigInt
• 復雜對象指的是 JS 的引用數據類型,，例如：Object,、Array、Function...

- 3 -

JS 垃圾回收機制

圖中左側為棧空間，用于存放一些執(zhí)行上下文和基本類型數據,；右側為堆空間，用于存放一些復雜對象數據

待 fn1函數內部執(zhí)行完畢以后,，就該退出 fn1函數執(zhí)行上下文了,，即箭頭再向下移動，此時 fn1函數執(zhí)行上下文會被清除并釋放相應的棧內存空間,，如圖所示：

此時處于全局的執(zhí)行上下文中,。JavaScript 的垃圾回收器會每隔一段時間遍歷調用棧，假設此時觸發(fā)了垃圾回收機制,，當遍歷調用棧時發(fā)現變量 b 和變量 c 沒有被任何變量所引用,，所以認定它們是垃圾數據并給它們打上標記。因為fn1函數執(zhí)行完后將變量 a 返回了出去,，并存儲在全局變量 res 中,，所以認定其為活動數據并打上相應標記。待空閑時刻就會將標記上垃圾數據的變量給全部清除掉,，釋放相應的內存,，如圖所示：

1. JavaScript 的垃圾回收機制是自動執(zhí)行的，并且會通過標記來識別并清除垃圾數據
2. 在離開局部作用域后,，若該作用域內的變量沒有被外部作用域所引用,，則在后續(xù)會被清除

補充：JavaScript 的垃圾回收機制有著很多的步驟，上述只講到了標記-清除,，其實還有其它的過程,，這里簡單介紹一下就不展開討論了。例如：標記-整理,，在清空部分垃圾數據后釋放了一定的內存空間后會可能會留下大面積的不連續(xù)內存片段,，導致后續(xù)可能無法為某些對象分配連續(xù)內存,，此時需要整理一下內存空間；交替執(zhí)行,，因為 JavaScript 是運行在主線程上的,，所以執(zhí)行垃圾回收機制時會暫停 js 的運行，若垃圾回收執(zhí)行時間過長,，則會給用戶帶來明顯的卡頓現象，所以垃圾回收機制會被分成一個個的小任務,，穿插在js任務之中,，即交替執(zhí)行，盡可能得保證不會帶來明顯的卡頓感

- 4 -

Chrome devTools 查看內存情況

在了解一些常見的內存泄漏的場景之前,，先簡單介紹一下如何使用 Chrome 的開發(fā)者工具來查看js內存情況

首先打開 Chrome 的無痕模式,，這樣做的目的是為了屏蔽掉 Chrome 插件對我們之后測試內存占用情況的影響

簡單錄制一下百度頁面，看看我們能獲得什么,，如下動圖所示：

- 5 -

內存泄漏的場景

1. 閉包使用不當引起內存泄漏
2. 全局變量
3. 分離的 DOM 節(jié)點
4. 控制臺的打印
5. 遺忘的定時器

5.1 閉包使用不當

<button onclick='myClick()'>執(zhí)行fn1函數</button>
<script>
    function fn1 () {
        let a = new Array(10000)  // 這里設置了一個很大的數組對象

        let b = 3

        function fn2() {
            let c = [1, 2, 3]
        }

        fn2()

        return a
    }

    let res = []  

    function myClick() {
        res.push(fn1())
    }
</script>

5.2 全局變量

function fn1() {
    'use strict';
    name = new Array(99999999)
}

fn1()

5.3 分離的 DOM 節(jié)點

<div id='root'>
    <div class='child'>我是子元素</div>
    <button>移除</button>
</div>
<script>
    let btn = document.querySelector('button')

    btn.addEventListener('click', function() {  
        let child = document.querySelector('.child')
        let root = document.querySelector('#root')

        root.removeChild(child)
    })

</script>

5.4 控制臺的打印

<button>按鈕</button>
<script>
    document.querySelector('button').addEventListener('click', function() {
        let obj = new Array(1000000)

        // console.log(obj);
    })
</script>

• 未注釋 console.log

• 注釋掉了 console.log

5.5 遺忘的定時器

<button>開啟定時器</button>
<script>

    function fn1() {
        let largeObj = new Array(100000)

        setInterval(() => {
            let myObj = largeObj
        }, 1000)
    }

    document.querySelector('button').addEventListener('click', function() {
        fn1()
    })
</script>

• performance

• memory

- 6 -

總結