一、核心原理：理解內存泄漏的本質

二、具體場景與避免方法

1. 清理不再需要的事件監聽

• 解決方案：
  • 組件卸載時移除監聽：在 React/Vue 等框架中，在組件銷毀生命周期（如componentWillUnmount、onUnmounted）中移除事件監聽。
    示例（Vue）：
    javascript

    運行

    onMounted(() => {
      window.addEventListener('scroll', handleScroll);
    });
    onUnmounted(() => {
      // 必須移除監聽，否則handleScroll和組件實例會被持續引用
      window.removeEventListener('scroll', handleScroll);
    });
    
  • 用 “事件委托” 減少監聽數量：對列表等動態生成的元素，將事件監聽綁定到父元素（如ul），而非每個子元素（li），避免頻繁添加 / 移除監聽。
  • 避免匿名函數作為回調：匿名函數無法被removeEventListener識別（因為每次創建的匿名函數是不同引用），需用具名函數。

2. 控制全局變量的創建與釋放

• 解決方案：
  • 減少不必要的全局變量：用let/const替代var，避免變量意外泄露到全局；將臨時變量放在函數作用域內，而非全局。
    錯誤示例（意外全局變量）：
    javascript

    運行

    function test() {
      // 忘記聲明var/let/const，導致a成為window的屬性
      a = 'leak'; 
    }
    
  • 及時刪除全局變量引用：若必須使用全局變量，在不需要時手動賦值為null（切斷引用，讓垃圾回收器回收）：
    javascript

    運行

    window.tempData = { /* 大量數據 */ };
    // 使用完畢后釋放
    window.tempData = null;
    
  • 用 IIFE 隔離作用域：將代碼包裹在立即執行函數中，避免變量污染全局：
    javascript

    運行

    (function() {
      const localVar = '僅在當前作用域有效';
      // ...
    })();
    

3. 避免閉包中保留無用引用

• 解決方案：
  • 減少閉包中引用的變量范圍：只在閉包中引用必要的變量，避免引用整個對象（尤其是大型對象）。
    優化前（引用整個對象）：
    javascript

    運行

    function createClosure() {
      const bigObject = { /* 包含大量數據的對象 */ };
      return function() {
        // 僅使用bigObject的一個屬性，卻引用了整個對象
        console.log(bigObject.id); 
      };
    }
    const closure = createClosure(); // closure會一直持有bigObject的引用
    
    優化后（僅引用必要屬性）：
    javascript

    運行

    function createClosure() {
      const bigObject = { id: 1, /* 其他數據 */ };
      const { id } = bigObject; // 提取必要屬性
      return function() {
        console.log(id); // 僅引用id，bigObject可被回收
      };
    }
    
  • 及時釋放閉包引用：若閉包不再使用，將其賦值為null：
    javascript

    運行

    let closure = createClosure();
    // 使用完畢后釋放
    closure = null;
    

4. 處理 DOM 元素與 JS 對象的循環引用

• 解決方案：
  • 移除 DOM 后切斷關聯引用：在刪除 DOM 元素前，將對應的 JS 對象引用設為null。
    示例：
    javascript

    運行

    // 創建DOM與JS對象的關聯
    const dom = document.getElementById('box');
    const obj = { element: dom }; // obj引用dom
    dom.data = obj; // dom引用obj（循環引用）
    
    // 移除DOM時，必須切斷循環引用
    function removeDom() {
      dom.parentNode.removeChild(dom);
      obj.element = null; // 切斷obj對dom的引用
      dom.data = null; // 切斷dom對obj的引用
      // 若obj不再使用，也需設為null
      obj = null;
    }
    
  • 避免在 DOM 上存儲大量數據：DOM 元素的data-*屬性或自定義屬性應僅存儲少量必要數據，大量數據建議用 JS 變量單獨管理，并在 DOM 移除時同步清理。

5. 管理定時器與回調函數

• 解決方案：
  • 及時清除定時器：在組件卸載、頁面跳轉或不需要定時器時，用clearInterval/clearTimeout清除。
    示例（React）：
    javascript

    運行

    componentDidMount() {
      this.timer = setInterval(() => {
        // 定時器回調
      }, 1000);
    }
    componentWillUnmount() {
      clearInterval(this.timer); // 組件銷毀時清除定時器
    }
    
  • 避免定時器引用外部大對象：若定時器回調僅需部分數據，提取后單獨引用，避免引用整個組件實例或大型對象。

6. 處理第三方庫與框架的泄漏風險

• 解決方案：
  • 按文檔規范銷毀實例：使用第三方庫時，若提供銷毀方法（如 ECharts 的dispose、地圖庫的destroy），必須在組件卸載時調用。
    示例（ECharts）：
    javascript

    運行

    const chart = echarts.init(dom);
    // 組件卸載時銷毀圖表實例
    onUnmounted(() => {
      chart.dispose(); 
    });
    
  • 避免頻繁創建第三方庫實例：對需要頻繁更新的功能（如動態圖表），復用已有實例而非反復創建新實例。
  • 選擇輕量、無泄漏風險的庫：優先使用社區活躍、口碑好的庫（如用lodash替代小眾工具庫），避免使用長期未維護的庫。

三、檢測與定位內存泄漏的工具

1. Chrome 開發者工具（Memory 面板）：
   • 錄制內存快照（Heap Snapshot），對比多次快照中 “Detached DOM Tree”（已移除但未回收的 DOM）和 “Retained Size”（保留內存）異常增長的對象，定位泄漏源。
   • 使用 “Allocation Sampling” 記錄內存分配，查看哪些函數分配了大量內存且未釋放。
2. Performance 面板：
   錄制頁面運行過程，觀察 “Memory” 曲線是否持續上升（正常應穩定在一定范圍），若曲線只升不降，說明存在泄漏。
3. Lighthouse：
   運行性能測試時，勾選 “Memory” 選項，檢測頁面是否存在內存泄漏風險。

總結：避免內存泄漏的核心原則

1. “誰創建，誰銷毀”：事件監聽、定時器、第三方實例等資源，創建者需負責在不需要時銷毀。
2. 減少不必要的引用：只保留必要的變量 / 對象引用，避免全局變量、閉包、DOM 關聯中殘留無用引用。
3. 定期檢測與復盤：在功能上線前，用 Chrome 工具檢測內存變化，尤其針對頻繁交互的組件（如彈窗、列表、表單）。