系列文章: 前端工程師的 Modern Web 實踐之道 - Day 20
預計閱讀時間: 12 分鐘
難度等級: ⭐⭐⭐⭐☆

🎯 今日目標

在前一篇文章中，我們深入探討了 Bundle 分析與最佳化，學會了如何從構建層面提升應用效能。今天我們將把焦點轉向執行時效能，深入探討記憶體管理與除錯技術。這些能力將幫助你診斷和解決那些最棘手的效能問題。

為什麼要關注這個主題?

想像一個場景：你的 React 應用在生產環境中執行了幾個小時後，突然變得異常卡頓，記憶體使用量持續攀升，最終導致頁面崩潰。你打開 Chrome DevTools，看著那些密密麻麻的資料，卻不知道從何下手...

這是許多前端工程師都會遇到的痛點：

• 記憶體洩漏難以追蹤：應用執行一段時間後變慢，但不知道問題出在哪裡
• 效能瓶頸診斷困難：知道有效能問題，卻無法精準定位瓶頸位置
• 除錯工具使用不熟練：只會用 console.log，面對複雜問題束手無策
• 缺乏系統化除錯方法：遇到 bug 只能靠猜測和試錯

技術發展趨勢: 隨著 Web 應用複雜度不斷提升，單頁應用（SPA）長時間執行已成常態，記憶體管理和效能除錯能力變得越來越重要。現代瀏覽器提供了強大的開發者工具，但大多數開發者只用到了其中不到 20% 的功能。掌握這些進階工具，是成為高級前端工程師的必經之路。

🔍 深度分析：記憶體管理的技術本質

問題背景與現狀

JavaScript 記憶體管理機制

JavaScript 使用自動記憶體管理（垃圾回收），這既是優勢也帶來了挑戰：

自動垃圾回收的優勢：

• 開發者不需要手動分配和釋放記憶體
• 減少了許多記憶體管理相關的 bug
• 提高開發效率和程式碼安全性

潛在的問題：

• 開發者容易忽略記憶體管理的重要性
• 不當的程式碼模式會導致記憶體洩漏
• 垃圾回收的時機不可控，可能影響效能

常見的記憶體洩漏模式

讓我們看看實際專案中最容易出現的記憶體洩漏問題：

// ❌ 常見錯誤 1: 未清理的事件監聽器
class DataFetcher {
  constructor() {
    // 在建構函式中添加事件監聽
    window.addEventListener('resize', this.handleResize);
  }

  handleResize = () => {
    console.log('Window resized');
  }

  // 問題：沒有提供清理方法，組件銷毀後監聽器仍然存在
}

// ❌ 常見錯誤 2: 未清理的定時器
function startPolling() {
  const intervalId = setInterval(() => {
    fetchData();
  }, 1000);

  // 問題：intervalId 沒有被儲存在可訪問的地方，無法清理
}

// ❌ 常見錯誤 3: 閉包引用導致的記憶體洩漏
function createUserCache() {
  const cache = new Map();

  return {
    addUser(id, userData) {
      // 問題：cache 會不斷增長，從未清理舊資料
      cache.set(id, userData);
    },
    getUser(id) {
      return cache.get(id);
    }
    // 缺少清理機制
  };
}

// ❌ 常見錯誤 4: DOM 引用未清理
class ComponentManager {
  constructor() {
    this.components = [];
  }

  registerComponent(element) {
    // 問題：即使 DOM 元素被移除，這裡仍持有引用
    this.components.push({
      element,
      data: { /* ... */ }
    });
  }
}

技術方案深入解析

Chrome DevTools Memory Profiler 的工作原理

Chrome DevTools 提供了三種主要的記憶體分析工具：

1. Heap Snapshot（堆疊快照）

   • 捕捉某一時刻的記憶體狀態
   • 顯示物件的詳細資訊和引用關係
   • 用於對比不同時間點的記憶體使用

2. Allocation Timeline（分配時間軸）

   • 記錄一段時間內的記憶體分配
   • 即時顯示記憶體變化趨勢
   • 幫助找出頻繁分配記憶體的程式碼

3. Allocation Sampling（分配採樣）

   • 使用統計採樣方式記錄記憶體分配
   • 效能開銷較小，適合長時間監控
   • 提供函式調用堆疊資訊

💻 實戰演練：從零到一

案例 1: 診斷並修復記憶體洩漏

讓我們通過一個真實的 React 應用案例，學習如何系統化地診斷記憶體洩漏。

步驟 1: 重現問題並建立基線

// 問題組件：存在記憶體洩漏的 UserDashboard
import React, { useEffect, useState } from 'react';

function UserDashboard() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 問題 1: WebSocket 連接未清理
    const ws = new WebSocket('ws://api.example.com/users');

    ws.onmessage = (event) => {
      const newUser = JSON.parse(event.data);
      setUsers(prev => [...prev, newUser]);
    };

    // 問題 2: 定時器未清理
    const intervalId = setInterval(() => {
      console.log('Current users:', users.length);
    }, 1000);

    // 問題 3: 事件監聽器未清理
    const handleVisibilityChange = () => {
      console.log('Visibility changed');
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);

    // 缺少清理邏輯！
  }, []);

  return (
    <div>
      <h2>用戶儀表板</h2>
      <p>當前用戶數: {users.length}</p>
    </div>
  );
}

步驟 2: 使用 Heap Snapshot 分析記憶體

操作流程：

1. 打開 Chrome DevTools → Memory 標籤
2. 選擇 "Heap snapshot"
3. 執行以下測試步驟：
   • 拍攝初始快照（Snapshot 1）
   • 多次掛載/卸載組件（例如路由切換 10 次）
   • 拍攝第二次快照（Snapshot 2）
   • 選擇 "Comparison" 視圖，對比兩次快照

分析結果：

Comparison between Snapshot 1 and Snapshot 2

Constructor          | Delta | Alloc. Size | Freed Size | Size Delta
---------------------|-------|-------------|------------|------------
Array               | +120  | +45.2 KB    | -12.1 KB   | +33.1 KB
WebSocket           | +10   | +8.5 KB     | 0 KB       | +8.5 KB
(closure)           | +230  | +67.8 KB    | -5.2 KB    | +62.6 KB

⚠️ 發現問題：
- WebSocket 物件數量持續增加（應該只有 1 個）
- 閉包數量異常增長
- Array 持續增長（可能是事件監聽器引用）

步驟 3: 使用 Allocation Timeline 精準定位

// 在 DevTools 中：
// 1. 選擇 "Allocation instrumentation on timeline"
// 2. 點擊 "Record"
// 3. 執行組件掛載/卸載操作
// 4. 停止記錄

// 分析結果會顯示：
// - 哪些函式分配了記憶體
// - 記憶體是否被正確釋放
// - 洩漏發生的具體程式碼位置

步驟 4: 修復記憶體洩漏

// ✅ 修復後的版本
import React, { useEffect, useState, useRef } from 'react';

function UserDashboard() {
  const [users, setUsers] = useState([]);
  const wsRef = useRef(null);

  useEffect(() => {
    // 使用 ref 儲存 WebSocket 實例
    wsRef.current = new WebSocket('ws://api.example.com/users');

    const ws = wsRef.current;

    ws.onmessage = (event) => {
      const newUser = JSON.parse(event.data);
      setUsers(prev => [...prev, newUser]);
    };

    // 設定定時器並儲存 ID
    const intervalId = setInterval(() => {
      console.log('Current users:', users.length);
    }, 1000);

    // 定義事件處理函式（在外部，方便清理）
    const handleVisibilityChange = () => {
      console.log('Visibility changed');
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    // ✅ 清理函式：組件卸載時執行
    return () => {
      // 清理 WebSocket
      if (wsRef.current) {
        wsRef.current.close();
        wsRef.current = null;
      }

      // 清理定時器
      clearInterval(intervalId);

      // 清理事件監聽器
      document.removeEventListener('visibilitychange', handleVisibilityChange);

      console.log('✅ 所有資源已清理');
    };
  }, []); // 空依賴陣列，只在掛載時執行一次

  return (
    <div>
      <h2>用戶儀表板</h2>
      <p>當前用戶數: {users.length}</p>
    </div>
  );
}

export default UserDashboard;

步驟 5: 驗證修復效果

// 建立自動化測試腳本驗證記憶體洩漏修復
describe('UserDashboard Memory Leak Tests', () => {
  it('should not leak memory on mount/unmount cycles', async () => {
    const { unmount, rerender } = render(<UserDashboard />);

    // 記錄初始記憶體（需要在支援的測試環境中）
    const initialMemory = performance.memory?.usedJSHeapSize || 0;

    // 執行 100 次掛載/卸載循環
    for (let i = 0; i < 100; i++) {
      unmount();
      rerender(<UserDashboard />);
    }

    // 手動觸發垃圾回收（在 Chrome 中使用 --expose-gc flag）
    if (global.gc) {
      global.gc();
    }

    const finalMemory = performance.memory?.usedJSHeapSize || 0;
    const memoryGrowth = finalMemory - initialMemory;

    // 記憶體增長應該小於 5MB
    expect(memoryGrowth).toBeLessThan(5 * 1024 * 1024);
  });
});

案例 2: 效能瓶頸分析與最佳化

步驟 1: 識別效能問題

// 存在效能問題的列表組件
function ProductList({ products }) {
  // ❌ 問題：每次渲染都重新計算
  const sortedProducts = products.sort((a, b) => b.price - a.price);

  // ❌ 問題：每次渲染都創建新函式
  const handleClick = (productId) => {
    console.log('Product clicked:', productId);
  };

  return (
    <div>
      {sortedProducts.map(product => (
        <div key={product.id} onClick={() => handleClick(product.id)}>
          {/* ❌ 問題：內部創建複雜的派生資料 */}
          <ProductCard
            product={product}
            discount={calculateDiscount(product)} // 每次都重新計算
          />
        </div>
      ))}
    </div>
  );
}

// 效能密集的計算函式
function calculateDiscount(product) {
  // 模擬複雜計算
  let discount = 0;
  for (let i = 0; i < 10000; i++) {
    discount += product.price * 0.0001;
  }
  return discount;
}

步驟 2: 使用 Performance Panel 分析

操作流程：

1. 打開 Chrome DevTools → Performance 標籤
2. 點擊 Record（紅色圓點）
3. 與應用互動（例如滾動列表）
4. 停止記錄
5. 分析火焰圖（Flame Chart）

分析重點：

Performance 分析結果：

Main Thread (主執行緒)
├─ Task (總時長: 2847ms)
│  ├─ Function Call: ProductList [2456ms] ⚠️ 長任務！
│  │  ├─ Array.sort [458ms]
│  │  ├─ calculateDiscount [1823ms] ⚠️ 效能瓶頸！
│  │  └─ Render [175ms]
│  └─ Paint [391ms]

🎯 發現的問題：
1. ProductList 函式執行時間過長（>50ms 會導致卡頓）
2. calculateDiscount 被呼叫過於頻繁
3. Array.sort 在每次渲染時執行

步驟 3: 使用 React DevTools Profiler

// 在應用中包裹 Profiler
import { Profiler } from 'react';

function App() {
  const onRenderCallback = (
    id, // Profiler 的 id
    phase, // "mount" 或 "update"
    actualDuration, // 渲染花費的時間
    baseDuration, // 估計不使用記憶化的渲染時間
    startTime, // 開始渲染的時間
    commitTime, // 提交的時間
    interactions // 此次更新的 interactions 集合
  ) => {
    console.log({
      id,
      phase,
      actualDuration,
      baseDuration
    });
  };

  return (
    <Profiler id="ProductList" onRender={onRenderCallback}>
      <ProductList products={products} />
    </Profiler>
  );
}

步驟 4: 效能最佳化實作

// ✅ 最佳化後的版本
import React, { useMemo, useCallback } from 'react';

function ProductList({ products }) {
  // ✅ 使用 useMemo 快取排序結果
  const sortedProducts = useMemo(() => {
    console.log('🔄 重新排序產品');
    return [...products].sort((a, b) => b.price - a.price);
  }, [products]); // 只有當 products 改變時才重新計算

  // ✅ 使用 useCallback 快取事件處理器
  const handleClick = useCallback((productId) => {
    console.log('Product clicked:', productId);
  }, []); // 沒有依賴，函式永遠不會改變

  return (
    <div>
      {sortedProducts.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onClick={handleClick}
        />
      ))}
    </div>
  );
}

// ✅ 最佳化的 ProductCard 組件
const ProductCard = React.memo(({ product, onClick }) => {
  // ✅ 將計算移到這裡，並使用 useMemo
  const discount = useMemo(() => {
    return calculateDiscount(product);
  }, [product]);

  return (
    <div onClick={() => onClick(product.id)}>
      <h3>{product.name}</h3>
      <p>價格: ${product.price}</p>
      <p>折扣: ${discount.toFixed(2)}</p>
    </div>
  );
});

// ✅ 最佳化計算邏輯（使用快取）
const discountCache = new Map();

function calculateDiscount(product) {
  // 檢查快取
  if (discountCache.has(product.id)) {
    return discountCache.get(product.id);
  }

  // 計算折扣
  let discount = 0;
  for (let i = 0; i < 10000; i++) {
    discount += product.price * 0.0001;
  }

  // 儲存到快取（限制快取大小避免記憶體洩漏）
  if (discountCache.size > 1000) {
    const firstKey = discountCache.keys().next().value;
    discountCache.delete(firstKey);
  }

  discountCache.set(product.id, discount);
  return discount;
}

步驟 5: 使用 Performance Observer API 監控

// ✅ 生產環境效能監控
class PerformanceMonitor {
  constructor() {
    this.initLongTaskObserver();
    this.initLayoutShiftObserver();
  }

  // 監控長任務（>50ms）
  initLongTaskObserver() {
    if ('PerformanceObserver' in window) {
      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (entry.duration > 50) {
            console.warn('⚠️ 長任務檢測:', {
              duration: entry.duration,
              startTime: entry.startTime,
              name: entry.name
            });

            // 發送到監控服務
            this.reportToAnalytics('long-task', {
              duration: entry.duration,
              url: window.location.href
            });
          }
        }
      });

      observer.observe({ entryTypes: ['longtask'] });
    }
  }

  // 監控布局偏移（CLS）
  initLayoutShiftObserver() {
    if ('PerformanceObserver' in window) {
      let clsScore = 0;

      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (!entry.hadRecentInput) {
            clsScore += entry.value;
            console.log('📊 累計 CLS:', clsScore);
          }
        }
      });

      observer.observe({ entryTypes: ['layout-shift'] });

      // 頁面卸載時報告
      window.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
          this.reportToAnalytics('cls', { score: clsScore });
        }
      });
    }
  }

  reportToAnalytics(metric, data) {
    // 發送到 Google Analytics、Sentry 或自建監控系統
    if (window.gtag) {
      window.gtag('event', metric, data);
    }
  }
}

// 初始化監控
const monitor = new PerformanceMonitor();

案例 3: 記憶體洩漏的自動化檢測

// ✅ 使用 Puppeteer 進行自動化記憶體洩漏檢測
const puppeteer = require('puppeteer');

async function detectMemoryLeaks(url, actions) {
  const browser = await puppeteer.launch({
    headless: false,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  const page = await browser.newPage();

  // 啟用 Performance 監控
  await page.goto(url);

  const measurements = [];

  // 執行多次操作並記錄記憶體
  for (let i = 0; i < 10; i++) {
    // 執行測試動作（例如：導航、點擊等）
    await actions(page);

    // 獲取記憶體使用情況
    const metrics = await page.metrics();
    measurements.push({
      iteration: i,
      jsHeapUsed: metrics.JSHeapUsedSize,
      jsHeapTotal: metrics.JSHeapTotalSize
    });

    console.log(`Iteration ${i}: ${(metrics.JSHeapUsedSize / 1024 / 1024).toFixed(2)} MB`);

    // 等待一段時間讓垃圾回收執行
    await page.waitForTimeout(1000);
  }

  // 分析記憶體趨勢
  const memoryGrowth = measurements[measurements.length - 1].jsHeapUsed - measurements[0].jsHeapUsed;
  const growthPercentage = (memoryGrowth / measurements[0].jsHeapUsed) * 100;

  console.log('\n📊 記憶體分析結果:');
  console.log(`初始記憶體: ${(measurements[0].jsHeapUsed / 1024 / 1024).toFixed(2)} MB`);
  console.log(`最終記憶體: ${(measurements[measurements.length - 1].jsHeapUsed / 1024 / 1024).toFixed(2)} MB`);
  console.log(`記憶體增長: ${(memoryGrowth / 1024 / 1024).toFixed(2)} MB (${growthPercentage.toFixed(2)}%)`);

  if (growthPercentage > 50) {
    console.error('⚠️ 警告：可能存在記憶體洩漏！');
  } else {
    console.log('✅ 記憶體使用正常');
  }

  await browser.close();

  return {
    measurements,
    memoryGrowth,
    growthPercentage,
    hasLeak: growthPercentage > 50
  };
}

// 使用範例
detectMemoryLeaks('http://localhost:3000', async (page) => {
  // 模擬使用者操作
  await page.click('#dashboard-link');
  await page.waitForSelector('.user-dashboard');
  await page.click('#home-link');
  await page.waitForSelector('.home-page');
});

🚀 進階應用與最佳實踐

1. 建立記憶體管理的最佳實踐規範

// ✅ 資源管理類別範本
class ResourceManager {
  constructor() {
    this.resources = new Set();
    this.cleanupFunctions = new Set();
  }

  // 註冊需要清理的資源
  register(resource, cleanup) {
    this.resources.add(resource);
    this.cleanupFunctions.add(cleanup);

    return () => {
      this.unregister(resource, cleanup);
    };
  }

  // 取消註冊
  unregister(resource, cleanup) {
    this.resources.delete(resource);
    this.cleanupFunctions.delete(cleanup);
  }

  // 清理所有資源
  cleanup() {
    for (const cleanupFn of this.cleanupFunctions) {
      try {
        cleanupFn();
      } catch (error) {
        console.error('清理資源時發生錯誤:', error);
      }
    }

    this.resources.clear();
    this.cleanupFunctions.clear();
  }
}

// ✅ React Hook 實作
function useResourceManager() {
  const managerRef = useRef(null);

  if (!managerRef.current) {
    managerRef.current = new ResourceManager();
  }

  useEffect(() => {
    return () => {
      managerRef.current.cleanup();
    };
  }, []);

  return managerRef.current;
}

// ✅ 使用範例
function DataVisualization() {
  const resourceManager = useResourceManager();

  useEffect(() => {
    // WebSocket 連接
    const ws = new WebSocket('ws://api.example.com/data');
    resourceManager.register(ws, () => ws.close());

    // 定時器
    const intervalId = setInterval(() => {
      fetchData();
    }, 1000);
    resourceManager.register(intervalId, () => clearInterval(intervalId));

    // 事件監聽器
    const handleResize = () => console.log('Resized');
    window.addEventListener('resize', handleResize);
    resourceManager.register(handleResize, () => {
      window.removeEventListener('resize', handleResize);
    });

    // useEffect 返回的清理函式會自動呼叫 resourceManager.cleanup()
  }, []);

  return <div>資料視覺化組件</div>;
}

2. 效能監控的完整解決方案

// ✅ 企業級效能監控系統
class PerformanceTracker {
  constructor(config = {}) {
    this.config = {
      enableLongTaskDetection: true,
      enableMemoryMonitoring: true,
      enableResourceTiming: true,
      reportingEndpoint: '/api/performance',
      ...config
    };

    this.metrics = {
      longTasks: [],
      memorySnapshots: [],
      resourceTimings: []
    };

    this.init();
  }

  init() {
    if (this.config.enableLongTaskDetection) {
      this.observeLongTasks();
    }

    if (this.config.enableMemoryMonitoring) {
      this.monitorMemory();
    }

    if (this.config.enableResourceTiming) {
      this.observeResourceTiming();
    }

    this.observeWebVitals();
    this.setupReporting();
  }

  observeLongTasks() {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        this.metrics.longTasks.push({
          duration: entry.duration,
          startTime: entry.startTime,
          name: entry.name,
          timestamp: Date.now()
        });
      }
    });

    observer.observe({ entryTypes: ['longtask'] });
  }

  monitorMemory() {
    if (!performance.memory) return;

    setInterval(() => {
      this.metrics.memorySnapshots.push({
        usedJSHeapSize: performance.memory.usedJSHeapSize,
        totalJSHeapSize: performance.memory.totalJSHeapSize,
        jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
        timestamp: Date.now()
      });

      // 保持最近 100 筆記錄
      if (this.metrics.memorySnapshots.length > 100) {
        this.metrics.memorySnapshots.shift();
      }
    }, 5000); // 每 5 秒記錄一次
  }

  observeResourceTiming() {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.entryType === 'resource') {
          this.metrics.resourceTimings.push({
            name: entry.name,
            duration: entry.duration,
            transferSize: entry.transferSize,
            timestamp: Date.now()
          });
        }
      }
    });

    observer.observe({ entryTypes: ['resource'] });
  }

  observeWebVitals() {
    // First Contentful Paint (FCP)
    const fcpObserver = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.name === 'first-contentful-paint') {
          this.metrics.fcp = entry.startTime;
        }
      }
    });
    fcpObserver.observe({ entryTypes: ['paint'] });

    // Largest Contentful Paint (LCP)
    const lcpObserver = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      const lastEntry = entries[entries.length - 1];
      this.metrics.lcp = lastEntry.startTime;
    });
    lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });

    // First Input Delay (FID)
    const fidObserver = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        this.metrics.fid = entry.processingStart - entry.startTime;
      }
    });
    fidObserver.observe({ entryTypes: ['first-input'] });

    // Cumulative Layout Shift (CLS)
    let clsScore = 0;
    const clsObserver = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!entry.hadRecentInput) {
          clsScore += entry.value;
        }
      }
      this.metrics.cls = clsScore;
    });
    clsObserver.observe({ entryTypes: ['layout-shift'] });
  }

  setupReporting() {
    // 頁面可見性改變時報告
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.report();
      }
    });

    // 定期報告
    setInterval(() => {
      this.report();
    }, 60000); // 每分鐘報告一次
  }

  async report() {
    const report = {
      url: window.location.href,
      userAgent: navigator.userAgent,
      timestamp: Date.now(),
      metrics: this.metrics,
      webVitals: {
        fcp: this.metrics.fcp,
        lcp: this.metrics.lcp,
        fid: this.metrics.fid,
        cls: this.metrics.cls
      }
    };

    try {
      await fetch(this.config.reportingEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(report)
      });
    } catch (error) {
      console.error('效能報告發送失敗:', error);
    }
  }

  // 取得當前效能概覽
  getPerformanceOverview() {
    const memoryTrend = this.analyzeMemoryTrend();

    return {
      longTasksCount: this.metrics.longTasks.length,
      avgLongTaskDuration: this.calculateAverage(
        this.metrics.longTasks.map(t => t.duration)
      ),
      memoryTrend,
      webVitals: {
        fcp: this.metrics.fcp,
        lcp: this.metrics.lcp,
        fid: this.metrics.fid,
        cls: this.metrics.cls
      }
    };
  }

  analyzeMemoryTrend() {
    if (this.metrics.memorySnapshots.length < 2) {
      return 'insufficient_data';
    }

    const first = this.metrics.memorySnapshots[0];
    const last = this.metrics.memorySnapshots[this.metrics.memorySnapshots.length - 1];
    const growth = last.usedJSHeapSize - first.usedJSHeapSize;
    const growthRate = (growth / first.usedJSHeapSize) * 100;

    if (growthRate > 50) return 'critical';
    if (growthRate > 20) return 'warning';
    return 'healthy';
  }

  calculateAverage(numbers) {
    if (numbers.length === 0) return 0;
    return numbers.reduce((a, b) => a + b, 0) / numbers.length;
  }
}

// ✅ 使用範例
const tracker = new PerformanceTracker({
  enableLongTaskDetection: true,
  enableMemoryMonitoring: true,
  reportingEndpoint: '/api/performance'
});

// 在控制台查看效能概覽
console.log(tracker.getPerformanceOverview());

3. 除錯工作流程最佳化

// ✅ 進階 Console 技巧
class AdvancedLogger {
  constructor(moduleName) {
    this.moduleName = moduleName;
    this.logLevel = process.env.NODE_ENV === 'production' ? 'error' : 'debug';
  }

  // 結構化日誌
  log(level, message, data = {}) {
    const timestamp = new Date().toISOString();
    const logEntry = {
      timestamp,
      level,
      module: this.moduleName,
      message,
      data
    };

    // 使用 console.table 顯示結構化資料
    if (data && typeof data === 'object') {
      console.group(`[${level.toUpperCase()}] ${this.moduleName}: ${message}`);
      console.table(data);
      console.groupEnd();
    } else {
      console.log(`[${level}] ${timestamp} - ${this.moduleName}: ${message}`, data);
    }

    // 發送到日誌服務
    this.sendToLoggingService(logEntry);
  }

  // 效能追蹤
  time(label) {
    console.time(`${this.moduleName}:${label}`);
  }

  timeEnd(label) {
    console.timeEnd(`${this.moduleName}:${label}`);
  }

  // 追蹤函式呼叫堆疊
  trace(message) {
    console.trace(`${this.moduleName}: ${message}`);
  }

  // 發送到日誌服務（例如：Sentry、LogRocket）
  async sendToLoggingService(logEntry) {
    // 實作日誌發送邏輯
  }
}

// ✅ 使用範例
const logger = new AdvancedLogger('UserService');

logger.time('fetchUsers');
await fetchUsers();
logger.timeEnd('fetchUsers');

logger.log('info', 'Users loaded', {
  count: users.length,
  cached: isCached
});

📋 本日重點回顧

1. 核心概念: JavaScript 的自動記憶體管理雖然方便，但不當使用仍會導致記憶體洩漏。掌握 Chrome DevTools 的 Memory Profiler 和 Performance Panel，能夠系統化地診斷和解決效能問題。

2. 關鍵技術:

   • 使用 Heap Snapshot 對比記憶體變化，精準定位洩漏來源
   • 利用 Performance Timeline 分析執行時效能瓶頸
   • 通過 React Profiler 和 useMemo/useCallback 最佳化組件效能
   • 使用 Performance Observer API 建立生產環境監控

3. 實踐要點:

   • 始終在 useEffect 中提供清理函式，確保資源正確釋放
   • 為長時間執行的應用建立自動化記憶體檢測機制
   • 使用結構化的日誌和效能監控系統，及早發現問題
   • 將效能最佳化納入開發流程，而非事後補救

🎯 最佳實踐建議

• ✅ 推薦做法: 在開發階段定期使用 Memory Profiler 檢查記憶體洩漏，養成良好習慣

• ✅ 推薦做法: 為關鍵業務流程添加 Performance.mark() 和 Performance.measure()，量化效能指標

• ✅ 推薦做法: 使用 React.memo、useMemo、useCallback 最佳化組件，但避免過度最佳化

• ✅ 推薦做法: 建立自動化的效能回歸測試，防止效能劣化

• ❌ 避免陷阱: 不要忽視 useEffect 的清理函式，這是最常見的記憶體洩漏來源

• ❌ 避免陷阱: 不要在沒有測量的情況下進行最佳化，先分析再行動

• ❌ 避免陷阱: 不要過度依賴 console.log 除錯，學習使用 Debugger 和斷點

• ❌ 避免陷阱: 不要在生產環境忽視效能監控，問題往往在真實使用場景中才會暴露

🤔 延伸思考

1. 記憶體管理的權衡: 在追求效能時使用快取機制，但快取本身也會佔用記憶體。如何在兩者之間找到最佳平衡點？

2. 效能監控的成本: 完善的效能監控系統本身也會消耗資源。如何設計一個低開銷但高效的監控方案？

3. 實戰挑戰: 為你目前的專案建立一套完整的記憶體洩漏檢測和效能監控體系，包含開發階段的檢測工具和生產環境的監控系統。