name: performance-profiling
description: 性能剖析原则。测量、分析和优化技术。
allowed-tools: Read, Glob, Grep, Bash
性能剖析
测量、分析、优化——按此顺序。
🔧 运行时脚本
执行这些以进行自动化剖析：
| Script |
Purpose |
Usage |
scripts/lighthouse_audit.py |
Lighthouse性能审核 |
python scripts/lighthouse_audit.py https://example.com |
1. 核心Web指标
目标
| Metric |
Good |
Poor |
Measures |
| LCP |
< 2.5s |
> 4.0s |
加载 |
| INP |
< 200ms |
> 500ms |
交互性 |
| CLS |
< 0.1 |
> 0.25 |
稳定性 |
何时测量
| Stage |
Tool |
| 开发 |
本地Lighthouse |
| CI/CD |
Lighthouse CI |
| 生产 |
RUM（真实用户监控） |
2. 剖析工作流
四步过程
1. BASELINE → 测量当前状态
2. IDENTIFY → 找到瓶颈
3. FIX → 做出有针对性的更改
4. VALIDATE → 确认改进
剖析工具选择
| Problem |
Tool |
| 页面加载 |
Lighthouse |
| 包大小 |
包分析器 |
| 运行时 |
DevTools性能 |
| 内存 |
DevTools内存 |
| 网络 |
DevTools网络 |
3. 包分析
需要关注什么
| Issue |
Indicator |
| 大型依赖项 |
包顶部 |
| 重复代码 |
多个块 |
| 未使用代码 |
低覆盖率 |
| 缺失分割 |
单个大块 |
优化操作
| Finding |
Action |
| 大型库 |
导入特定模块 |
| 重复依赖 |
去重，更新版本 |
| 路由在主包中 |
代码分割 |
| 未使用导出 |
树摇 |
4. 运行时剖析
性能标签分析
| Pattern |
Meaning |
| 长任务(>50ms) |
UI阻塞 |
| 许多小任务 |
可能的批处理机会 |
| 布局/绘制 |
渲染瓶颈 |
| 脚本 |
JavaScript执行 |
内存标签分析
| Pattern |
Meaning |
| 增长堆 |
可能的泄漏 |
| 大型保留 |
检查引用 |
| 分离的DOM |
未清理 |
5. 常见瓶颈
按症状
| Symptom |
Likely Cause |
| 初始加载慢 |
大型JS，渲染阻塞 |
| 交互慢 |
重事件处理程序 |
| 滚动时卡顿 |
布局抖动 |
| 内存增长 |
泄漏，保留引用 |
6. 快速获胜优先级
| Priority |
Action |
Impact |
| 1 |
启用压缩 |
高 |
| 2 |
懒加载图像 |
高 |
| 3 |
代码分割路由 |
高 |
| 4 |
缓存静态资产 |
中 |
| 5 |
优化图像 |
中 |
7. 反模式
| ❌ 不要 |
✅ 做 |
| 猜测问题 |
先剖析 |
| 微优化 |
修复最大问题 |
| 过早优化 |
需要时优化 |
| 忽略真实用户 |
使用RUM数据 |
记住： 最快的代码是不运行的代码。优化前先移除。