性能分析
先测量，再分析，最后优化。
🔧 运行时脚本
使用前请先检查此捆绑辅助工具的代码，并且仅对已获授权的 URL 运行。Lighthouse 会启动浏览器并加载第三方资源；实验室评分不能证明现场 Core Web Vitals 达标。此辅助工具会分别报告命令／JSON 错误和不可用的评分；请检查返回的错误，不要将不可用的类别视为零分。
| 脚本 | 用途 | 用法 |
|---|
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. 分析工作流
4 步流程
1. BASELINE → Measure current state
2. IDENTIFY → Find the bottleneck
3. FIX → Make targeted change
4. VALIDATE → Confirm improvement
分析工具选择
| 问题 | 工具 |
|---|
| 页面加载 | Lighthouse |
| 捆绑包大小 | 捆绑包分析器 |
| 运行时 | DevTools Performance |
| 内存 | DevTools Memory |
| 网络 | DevTools Network |
3. 捆绑包分析
需要关注的内容
| 问题 | 指标 |
|---|
| 依赖项过大 | 捆绑包顶部 |
| 代码重复 | 多个代码块 |
| 未使用的代码 | 覆盖率低 |
| 缺少拆分 | 单个大型代码块 |
优化措施
| 发现的问题 | 措施 |
|---|
| 库过大 | 导入特定模块 |
| 依赖重复 | 去重并更新版本 |
| 路由位于主包中 | 代码拆分 |
| 未使用的导出 | 摇树优化 |
4. 运行时分析
Performance 标签页分析
| 模式 | 含义 |
|---|
| 长任务（>50ms） | 阻塞 UI |
| 许多小任务 | 可能有批处理机会 |
| 布局／绘制 | 渲染瓶颈 |
| 脚本 | JavaScript 执行 |
Memory 标签页分析
| 模式 | 含义 |
|---|
| 堆持续增长 | 可能存在泄漏 |
| 保留对象过大 | 检查引用 |
| 分离的 DOM | 未清理 |
5. 常见瓶颈
按症状分类
| 症状 | 可能原因 |
|---|
| 初始加载缓慢 | JavaScript 过大、阻塞渲染 |
| 交互缓慢 | 事件处理程序开销过大 |
| 滚动时卡顿 | 布局抖动 |
| 内存持续增长 | 泄漏、保留的引用 |
6. 快速见效的优化优先级
| 优先级 | 措施 | 影响 |
|---|
| 1 | 启用压缩 | 高 |
| 2 | 延迟加载屏幕外图片；LCP 图片保持即时加载 | 取决于工作负载 |
| 3 | 拆分路由代码 | 高 |
| 4 | 缓存静态资源 | 中 |
| 5 | 优化图片 | 中 |
7. 反模式
| ❌ 不要 | ✅ 应该 |
|---|
| 猜测问题所在 | 先分析 |
| 过度进行微优化 | 先解决最大的问题 |
| 过早优化 | 需要时再优化 |
| 忽视真实用户 | 使用 RUM 数据 |
请记住： 最快的代码，就是不运行的代码。先删减，再优化。
适用场景
当需要执行概述中描述的工作流或操作时，可使用此技能。
限制
- 仅当任务明确符合上述范围时，才使用此技能。
- 不要将输出视为可替代环境特定验证、测试或专家审查的方案。
- 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。
