快捷導(dǎo)航

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

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

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

前言

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

常見的內(nèi)存泄漏來源

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

排查方法

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

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

步驟：

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

示例：

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

代碼中手動排查

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

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

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

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

button.addEventListener("click", handleClick);

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

定時器：在不需要時清除定時器。

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

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

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

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： 這是一個 React 項目的工具，用來檢查組件渲染是否合理，避免不必要的渲染導(dǎo)致的內(nèi)存泄漏。
LeakCanary： 雖然這個工具是針對 Android 的，但類似的內(nèi)存泄漏檢測方法也可以應(yīng)用到前端。通過長時間監(jiān)控應(yīng)用的內(nèi)存使用，檢查是否存在內(nèi)存泄漏。

手動記錄和比對內(nèi)存占用

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

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

假設(shè)有一個頁面包含一個按鈕，用戶點擊按鈕會打開一個彈窗。如果每次點擊時都創(chuàng)建一個新的彈窗組件，但是沒有正確清除先前的彈窗事件，可能會導(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');
  });
}

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

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

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

改進后：

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)閉彈窗時，清理事件監(jiān)聽器
  function closeModal() {
    modal.removeEventListener('click', onClick);
    document.body.removeChild(modal);
  }

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