在構(gòu)建高性能、流暢的 Web 應(yīng)用時(shí)，內(nèi)存管理至關(guān)重要。如果處理不當(dāng)，內(nèi)存泄漏會(huì)導(dǎo)致應(yīng)用運(yùn)行緩慢、卡頓，甚至崩潰，嚴(yán)重影響用戶體驗(yàn)。作為前端開發(fā)者，我們經(jīng)常與 JavaScript 打交道，而 JavaScript 的垃圾回收機(jī)制雖然強(qiáng)大，但并非萬(wàn)無(wú)一失。稍有不慎，就可能埋下內(nèi)存泄漏的隱患。

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

簡(jiǎn)單來說，內(nèi)存泄漏是指程序中已經(jīng)不再需要的內(nèi)存，但由于某種原因沒有被釋放，導(dǎo)致這部分內(nèi)存無(wú)法被再次利用，從而造成內(nèi)存資源的浪費(fèi)。在 JavaScript 中，垃圾回收器會(huì)自動(dòng)回收不再使用的內(nèi)存，但如果我們的代碼中存在一些阻止垃圾回收器正常工作的因素，就會(huì)導(dǎo)致內(nèi)存泄漏。分享下幾個(gè)比較常見的前端內(nèi)存泄漏場(chǎng)景及其解決方案：

1. 被遺忘的定時(shí)器和回調(diào)函數(shù)

當(dāng)我們使用 setInterval 或 setTimeout 設(shè)置定時(shí)器，或者設(shè)置了事件監(jiān)聽器、訂閱發(fā)布等回調(diào)函數(shù)后，如果沒有及時(shí)清除，即使這些定時(shí)器或回調(diào)函數(shù)已經(jīng)不再需要，它們?nèi)匀粫?huì)駐留在內(nèi)存中，導(dǎo)致相關(guān)變量無(wú)法被回收。

坑點(diǎn)示例：

解決方案：

• 在組件卸載或不需要定時(shí)器時(shí)，使用 clearInterval 或 clearTimeout 清除定時(shí)器。
• 移除事件監(jiān)聽器使用 removeEventListener。
• 取消訂閱發(fā)布模式中的訂閱。

優(yōu)化示例：

2. 脫離 DOM 樹的 DOM 元素引用

當(dāng)我們使用 JavaScript 變量引用了某個(gè) DOM 元素，即使這個(gè) DOM 元素已經(jīng)從 DOM 樹中移除，由于 JavaScript 變量仍然持有對(duì)它的引用，該 DOM 元素及其子元素都無(wú)法被垃圾回收。

坑點(diǎn)示例：

解決方案：在 DOM 元素不再需要時(shí)，將引用該 DOM 元素的 JavaScript 變量設(shè)置為 null。

優(yōu)化示例：

3. 閉包使用不當(dāng)

閉包是 JavaScript 的強(qiáng)大特性，但如果不注意，也可能導(dǎo)致內(nèi)存泄漏。如果閉包中引用了外部作用域的變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢，這些變量也不會(huì)被垃圾回收，因?yàn)殚]包仍然保持著對(duì)它們的引用。

坑點(diǎn)示例：

解決方案：

• 謹(jǐn)慎使用閉包，避免不必要的變量引用。
• 如果確實(shí)需要使用閉包，在閉包不再需要時(shí)，手動(dòng)解除對(duì)外部變量的引用，例如將閉包變量設(shè)置為 null。

優(yōu)化示例：

4. 全局變量的濫用

全局變量只有在頁(yè)面關(guān)閉時(shí)才會(huì)被回收。如果定義了過多的全局變量，或者將一些臨時(shí)變量錯(cuò)誤地掛載到全局對(duì)象上，會(huì)導(dǎo)致這些變量一直占用內(nèi)存，直到頁(yè)面關(guān)閉。

坑點(diǎn)示例：

解決方案：

• 盡量避免使用全局變量，使用 let 或 const 聲明局部變量。
• 使用立即執(zhí)行函數(shù) (IIFE) 或模塊化方式來管理代碼，減少全局變量的暴露。

5. 未關(guān)閉的 WebSocket 連接

WebSocket 提供了持久的雙向通信通道。如果創(chuàng)建了 WebSocket 連接，但在不再需要時(shí)沒有正確關(guān)閉，該連接會(huì)一直占用資源，導(dǎo)致內(nèi)存泄漏。

坑點(diǎn)示例：

解決方案：

• 在不需要 WebSocket 連接時(shí)，使用 socket.close() 方法關(guān)閉連接。
• 可以在組件卸載或頁(yè)面關(guān)閉時(shí)，統(tǒng)一關(guān)閉 WebSocket 連接。

優(yōu)化示例：

6. Map 和 Set 的不當(dāng)使用

Map 和 Set 是 ES6 引入的新數(shù)據(jù)結(jié)構(gòu)。如果使用不當(dāng)，也可能導(dǎo)致內(nèi)存泄漏。例如，如果將對(duì)象作為 Map 的鍵或 Set 的成員，并且沒有手動(dòng)刪除這些鍵值對(duì)或成員，即使這些對(duì)象已經(jīng)不再需要，它們?nèi)匀粫?huì)被 Map 或 Set 引用，無(wú)法被垃圾回收。特別是當(dāng)鍵名是復(fù)雜對(duì)象時(shí)，內(nèi)存占用會(huì)非常明顯。

坑點(diǎn)示例：

解決方案：

• 在 Map 或 Set 中的鍵或成員不再需要時(shí)，使用 delete 方法刪除對(duì)應(yīng)的鍵值對(duì)或成員。
• 可以使用 WeakMap 或 WeakSet 來代替 Map 或 Set。WeakMap 和 WeakSet 對(duì)鍵或成員的引用是弱引用，不會(huì)阻止垃圾回收器回收不再需要的對(duì)象。

優(yōu)化示例：

7. 控制臺(tái)輸出 (console.log)

最后，在開發(fā)過程中，我們經(jīng)常使用 console.log 來調(diào)試代碼。但是，如果在生產(chǎn)環(huán)境中忘記刪除這些 console.log 語(yǔ)句，并且打印了一些大型對(duì)象，可能會(huì)導(dǎo)致這些對(duì)象一直被控制臺(tái)引用，無(wú)法被垃圾回收，這個(gè)我自己都踩過好幾次了…，一定要注意。

解決方案：

• 使用構(gòu)建工具或代碼檢查工具，在代碼發(fā)布到生產(chǎn)環(huán)境之前，自動(dòng)刪除 console.log 語(yǔ)句。
• 也可以重寫 console.log 方法，在生產(chǎn)環(huán)境中不執(zhí)行任何操作。