# Performance Profiling

> 效能分析原則。測量、分析與最佳化技術。

- Skill: `tai-ch0802/performance-profiling` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tai-ch0802/performance-profiling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tai-ch0802/performance-profiling/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Tai-ch0802 (https://skillmd.com/u/tai-ch0802)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/tai-ch0802/performance-profiling

---


# 效能分析

> 測量、分析、最佳化 — 按此順序。

## 🔧 執行腳本

**執行這些進行自動化分析：**

| 腳本 | 用途 | 使用方式 |
|------|------|----------|
| `scripts/lighthouse_audit.py` | Lighthouse 效能稽核 | `python scripts/lighthouse_audit.py https://example.com` |

---

## 1. 核心 Web 指標

### 目標值

| 指標 | 良好 | 差 | 測量項目 |
|------|------|-----|----------|
| **LCP** | < 2.5s | > 4.0s | 載入 |
| **INP** | < 200ms | > 500ms | 互動性 |
| **CLS** | < 0.1 | > 0.25 | 穩定性 |

### 何時測量

| 階段 | 工具 |
|------|------|
| 開發 | 本地 Lighthouse |
| CI/CD | Lighthouse CI |
| 生產 | RUM（真實使用者監控）|

---

## 2. 分析工作流程

### 4 步驟流程

```
1. 基線 → 測量當前狀態
2. 識別 → 找到瓶頸
3. 修復 → 做有針對性的變更
4. 驗證 → 確認改善
```

### 分析工具選擇

| 問題 | 工具 |
|------|------|
| 頁面載入 | Lighthouse |
| 打包大小 | Bundle analyzer |
| 執行期 | DevTools Performance |
| 記憶體 | DevTools Memory |
| 網路 | DevTools Network |

---

## 3. 打包分析

### 要尋找什麼

| 問題 | 指標 |
|------|------|
| 大型依賴 | 打包頂部 |
| 重複程式碼 | 多個 chunk |
| 未使用程式碼 | 低覆蓋率 |
| 缺少分割 | 單一大 chunk |

### 最佳化動作

| 發現 | 動作 |
|------|------|
| 大型函式庫 | 精確引入特定模組 |
| 重複依賴 | 去重、更新版本 |
| 路由在主包中 | 程式碼分割 |
| 未使用的匯出 | Tree shake |

---

## 4. 執行期分析

### Performance 分頁分析

| 模式 | 意義 |
|------|------|
| 長任務（>50ms）| UI 阻塞 |
| 許多小任務 | 可能的批次處理機會 |
| Layout/paint | 渲染瓶頸 |
| Script | JavaScript 執行 |

### Memory 分頁分析

| 模式 | 意義 |
|------|------|
| 堆持續增長 | 可能的記憶體洩漏 |
| 大量保留 | 檢查參考 |
| 分離的 DOM | 未清理 |

---

## 5. 常見瓶頸

### 依症狀

| 症狀 | 可能原因 |
|------|----------|
| 初始載入慢 | 大 JS、渲染阻塞 |
| 互動慢 | 沉重的事件處理器 |
| 捲動卡頓 | Layout thrashing |
| 記憶體持續增長 | 洩漏、保留的參考 |

---

## 6. 快速勝出優先順序

| 優先 | 動作 | 影響 |
|------|------|------|
| 1 | 啟用壓縮 | 高 |
| 2 | 延遲載入圖片 | 高 |
| 3 | 路由程式碼分割 | 高 |
| 4 | 快取靜態資產 | 中 |
| 5 | 最佳化圖片 | 中 |

---

## 7. 反模式

| ❌ 不要 | ✅ 要 |
|---------|-------|
| 猜測問題 | 先分析 |
| 微觀最佳化 | 修復最大的問題 |
| 過早最佳化 | 需要時再最佳化 |
| 忽略真實使用者 | 使用 RUM 資料 |

---

> **記住：** 最快的程式碼是不執行的程式碼。先移除，再最佳化。