快捷導(dǎo)航

前端排查內(nèi)存泄漏的方法及實(shí)戰(zhàn)案例

更新時(shí)間：2025年03月31日 08:28:36 作者：憶宸_1

內(nèi)存泄漏是指在程序運(yùn)行時(shí),分配的內(nèi)存沒(méi)有被正確釋放,導(dǎo)致內(nèi)存空間的浪費(fèi),最終可能會(huì)導(dǎo)致程序崩潰或運(yùn)行緩慢,這篇文章主要介紹了前端排查內(nèi)存泄漏的相關(guān)資料,需要的朋友可以參考下

前言

在前端開(kāi)發(fā)中，內(nèi)存泄漏是指應(yīng)用程序在運(yùn)行過(guò)程中未能釋放不再使用的內(nèi)存，導(dǎo)致內(nèi)存占用不斷增加，最終可能導(dǎo)致頁(yè)面性能下降甚至崩潰。排查內(nèi)存泄漏通常需要通過(guò)一些工具和方法來(lái)識(shí)別不釋放的資源。

常見(jiàn)的內(nèi)存泄漏來(lái)源

未清除的事件監(jiān)聽(tīng)器： 事件監(jiān)聽(tīng)器沒(méi)有在不需要時(shí)被移除，導(dǎo)致引用未被釋放。
閉包（Closure）問(wèn)題： 閉包中的引用無(wú)法釋放，導(dǎo)致內(nèi)存泄漏。
DOM元素的引用： 某些元素在頁(yè)面中已經(jīng)移除，但仍被JavaScript引用，導(dǎo)致內(nèi)存無(wú)法回收。
定時(shí)器和異步操作： setInterval、setTimeout、Promise等異步操作沒(méi)有被清除，導(dǎo)致內(nèi)存泄漏。

排查方法

使用 Chrome DevTools 進(jìn)行內(nèi)存分析

Chrome 開(kāi)發(fā)者工具提供了內(nèi)存分析工具，可以幫助開(kāi)發(fā)者檢查內(nèi)存使用情況并定位內(nèi)存泄漏問(wèn)題。

步驟：

打開(kāi) Chrome 開(kāi)發(fā)者工具（F12），切換到 “Memory” 面板。
在 “Memory” 面板中有幾種方式可以檢查內(nèi)存：
- Heap Snapshot：可以查看內(nèi)存堆快照，分析對(duì)象的分配情況，識(shí)別泄漏的對(duì)象。
- Allocation Timeline：記錄內(nèi)存分配情況，觀察內(nèi)存分配的趨勢(shì)，可以發(fā)現(xiàn)內(nèi)存增長(zhǎng)的原因。
- Allocations Instrumentation on Timeline：記錄實(shí)時(shí)的內(nèi)存分配活動(dòng)，適用于實(shí)時(shí)分析。

示例：

Heap Snapshot：可以獲取當(dāng)前堆內(nèi)存的快照，分析哪些對(duì)象占用了最多的內(nèi)存，以及哪些對(duì)象的引用鏈存在泄漏。
Allocation Timeline：通過(guò)長(zhǎng)時(shí)間的內(nèi)存分配追蹤，可以發(fā)現(xiàn)內(nèi)存占用異常增長(zhǎng)的區(qū)域，進(jìn)一步查找泄漏的來(lái)源。

代碼中手動(dòng)排查

除了使用開(kāi)發(fā)者工具外，還可以從代碼本身排查內(nèi)存泄漏的常見(jiàn)問(wèn)題：

事件監(jiān)聽(tīng)器：確保在不需要的時(shí)候移除事件監(jiān)聽(tīng)器。

const button = document.querySelector("button");

// 設(shè)置事件監(jiān)聽(tīng)器
function handleClick() {
  console.log("Button clicked!");
}

button.addEventListener("click", handleClick);

// 在不需要時(shí)移除事件監(jiān)聽(tīng)器
button.removeEventListener("click", handleClick);

定時(shí)器：在不需要時(shí)清除定時(shí)器。

const timer = setInterval(() => {
  console.log("Interval running...");
}, 1000);

// 停止定時(shí)器
clearInterval(timer);

閉包引用：確保閉包中的對(duì)象可以被垃圾回收。

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = createCounter();

// 如果閉包中的 `count` 不再需要，可以將 `counter` 置為 null，避免占用內(nèi)存。
counter = null;

使用內(nèi)存泄漏檢查工具

Why-did-you-render： 這是一個(gè) React 項(xiàng)目的工具，用來(lái)檢查組件渲染是否合理，避免不必要的渲染導(dǎo)致的內(nèi)存泄漏。
LeakCanary： 雖然這個(gè)工具是針對(duì) Android 的，但類似的內(nèi)存泄漏檢測(cè)方法也可以應(yīng)用到前端。通過(guò)長(zhǎng)時(shí)間監(jiān)控應(yīng)用的內(nèi)存使用，檢查是否存在內(nèi)存泄漏。

手動(dòng)記錄和比對(duì)內(nèi)存占用

開(kāi)發(fā)者可以手動(dòng)記錄不同操作（例如點(diǎn)擊按鈕、加載新頁(yè)面等）前后的內(nèi)存占用變化，從而查看內(nèi)存是否持續(xù)增長(zhǎng)。

一個(gè)簡(jiǎn)單的內(nèi)存泄漏案例

假設(shè)有一個(gè)頁(yè)面包含一個(gè)按鈕，用戶點(diǎn)擊按鈕會(huì)打開(kāi)一個(gè)彈窗。如果每次點(diǎn)擊時(shí)都創(chuàng)建一個(gè)新的彈窗組件，但是沒(méi)有正確清除先前的彈窗事件，可能會(huì)導(dǎo)致內(nèi)存泄漏。

let modal;

function openModal() {
  modal = document.createElement('div');
  modal.textContent = "This is a modal!";
  document.body.appendChild(modal);

  modal.addEventListener('click', () => {
    console.log('Modal clicked');
  });
}

// 如果沒(méi)有移除事件監(jiān)聽(tīng)器并刪除 modal，內(nèi)存不會(huì)釋放。
function closeModal() {
  document.body.removeChild(modal);
  // 如果沒(méi)有手動(dòng)移除事件監(jiān)聽(tīng)器，內(nèi)存中會(huì)持續(xù)保留對(duì) modal 的引用。
}

// 點(diǎn)擊按鈕打開(kāi)彈窗
const openButton = document.querySelector('#open-modal');
openButton.addEventListener('click', openModal);

上面代碼的缺點(diǎn)是沒(méi)有在關(guān)閉彈窗時(shí)移除事件監(jiān)聽(tīng)器。每次打開(kāi)彈窗時(shí)，都會(huì)創(chuàng)建一個(gè)新的彈窗元素，并且事件監(jiān)聽(tīng)器一直存在。最終這些元素和事件監(jiān)聽(tīng)器會(huì)阻止垃圾回收，導(dǎo)致內(nèi)存泄漏。

改進(jìn)后：

function openModal() {
  modal = document.createElement('div');
  modal.textContent = "This is a modal!";
  document.body.appendChild(modal);

  function onClick() {
    console.log('Modal clicked');
  }

  modal.addEventListener('click', onClick);

  // 關(guān)閉彈窗時(shí)，清理事件監(jiān)聽(tīng)器
  function closeModal() {
    modal.removeEventListener('click', onClick);
    document.body.removeChild(modal);
  }

  // 可以通過(guò)其他方式調(diào)用 closeModal()，例如監(jiān)聽(tīng)按鈕點(diǎn)擊事件
  document.querySelector('#close-modal').addEventListener('click', closeModal);
}