关于
性能分析原则。测量、分析和优化技术，帮助识别和解决应用性能瓶颈。
name: performance-profiling description: "性能分析原则。测量、分析和优化技术。" risk: unknown source: community date_added: "2026-02-27"
性能分析
测量、分析、优化——按此顺序。
运行时脚本
执行以下脚本进行自动化性能分析：
| 脚本 | 用途 | 使用方法 |
|------|------|----------|
| scripts/lighthouse_audit.py | Lighthouse 性能审计 | python scripts/lighthouse_audit.py https://example.com |
1. Core Web Vitals
目标值
| 指标 | 良好 | 差 | 衡量内容 | |------|------|-----|----------| | LCP | < 2.5s | > 4.0s | 加载速度 | | INP | < 200ms | > 500ms | 交互性 | | CLS | < 0.1 | > 0.25 | 稳定性 |
何时测量
| 阶段 | 工具 | |------|------| | 开发 | 本地 Lighthouse | | CI/CD | Lighthouse CI | | 生产 | RUM（真实用户监控） |
2. 分析工作流
四步流程
1. 基线 → 测量当前状态
2. 识别 → 找到瓶颈
3. 修复 → 进行针对性更改
4. 验证 → 确认改善
分析工具选择
| 问题 | 工具 | |------|------| | 页面加载 | Lighthouse | | 包大小 | Bundle analyzer | | 运行时 | DevTools Performance | | 内存 | DevTools Memory | | 网络 | DevTools Network |
3. 包分析
关注点
| 问题 | 指标 | |------|------| | 大型依赖 | 包顶部 | | 重复代码 | 多个 chunk | | 未使用代码 | 低覆盖率 | | 缺少分割 | 单个大 chunk |
优化操作
| 发现 | 操作 | |------|------| | 大型库 | 导入特定模块 | | 重复依赖 | 去重，更新版本 | | 路由在主包中 | 代码分割 | | 未使用的导出 | Tree shaking |
4. 运行时分析
Performance 面板分析
| 模式 | 含义 | |------|------| | 长任务（>50ms） | UI 阻塞 | | 许多小任务 | 可能的批处理机会 | | 布局/绘制 | 渲染瓶颈 | | 脚本 | JavaScript 执行 |
Memory 面板分析
| 模式 | 含义 | |------|------| | 堆增长 | 可能的泄漏 | | 大量保留 | 检查引用 | | 分离的 DOM | 未清理 |
5. 常见瓶颈
按症状分类
| 症状 | 可能原因 | |------|----------| | 初始加载慢 | 大型 JS，渲染阻塞 | | 交互慢 | 重型事件处理器 | | 滚动卡顿 | 布局抖动 | | 内存增长 | 泄漏或未清理的引用 |