performance-profiling

# 性能分析 > 测量、分析、优化 - 按此顺序进行。 ## 🔧 运行时脚本 **执行这些脚本进行自动化分析：** | 脚本 | 用途 | 用法 | |--------|---------|-------| | `scripts/lighthouse_audit.py` | Lighthouse 性能审计 | `python scripts/lighthouse_audit.py https://example.com` | --- ## 1. 核心 Web 指标 (Core Web Vitals) ### 目标 | 指标 | 良好 | 较差 | 测量内容 | |--------|------|------|----------| | **LCP** | 4.0s | 加载 | | **INP** | 500ms | 交互性 | | **CLS** | 0.25 | 稳定性 | ### 何时测量 | 阶段 | 工具 | |-------|------| | 开发 | 本地 Lighthouse | | CI/CD | Lighthouse CI | | 生产 | RUM (真实用户监控) | --- ## 2. 分析工作流 ### 4 步流程 1. 基准测试 (BASELINE) → 测量当前状态 2. 识别 (IDENTIFY) → 找到瓶颈 3. 修复 (FIX) → 进行针对性修改 4. 验证 (VALIDATE) → 确认改进 ### 分析工具选择 | 问题 | 工具 | |---------|------| | 页面加载 | Lighthouse | | 包大小 | Bundle analyzer | | 运行时 | DevTools Performance | | 内存 | DevTools Memory | | 网络 | DevTools Network | --- ## 3. 包分析 ### 关注点 | 问题 | 指标 | |-------|-----------| | 大型依赖 | 包顶部 | | 重复代码 | 多个块 | | 未使用代码 | 低覆盖率 | | 缺少拆分 | 单个大块 | ### 优化操作 | 发现 | 操作 | |---------|--------| | 大型库 | 导入特定模块 | | 重复依赖 | 去重，更新版本 | | 主路由 | 代码拆分 | | 未使用导出 | Tree shaking | --- ## 4. 运行时分析 ### Performance 标签页分析 | 模式 | 含义 | |---------|---------| | 长任务 (>50ms) | UI 阻塞 | | 许多小任务 | 可能存在批处理机会 | | 布局/绘制 | 渲染瓶颈 | | 脚本 | JavaScript 执行 | ### Memory 标签页分析 | 模式 | 含义 | |---------|---------| | 堆内存增长 | 可能存在泄漏 | | 大量保留 | 检查引用 | | 分离的 DOM | 未清理 | --- ## 5. 常见瓶颈 ### 按症状分类 | 症状 | 可能原因 | |---------|--------------| | 初始加载慢 | 大型 JS，渲染阻塞 | | 交互慢 | 繁重的事件处理程序 | | 滚动卡顿 | 布局抖动 (Layout thrashing) | | 内存增长 | 泄漏，保留引用 | --- ## 6. 快速优化优先级 | 优先级 | 操作 | 影响 | |----------|--------|--------| | 1 | 启用压缩 | 高 | | 2 | 图片懒加载 | 高 | | 3 |