国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

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

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

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

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

- 1 -

內(nèi)存泄漏的定義

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

- 2 -

JS 的數(shù)據(jù)存儲

JavaScript 的內(nèi)存空間分為棧內(nèi)存和堆內(nèi)存，前者用來存放一些簡單變量，后者用來存放復(fù)雜對象

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

- 3 -

JS 垃圾回收機制

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

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

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

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

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

- 4 -

Chrome devTools 查看內(nèi)存情況

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

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

- 5 -

內(nèi)存泄漏的場景

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

5.1 閉包使用不當(dāng)

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

        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 -

總結(jié)