
关于
使用此技能测量性能基线、在 PR 前后检测回归,以及比较技术栈替代方案。
name: benchmark description: 使用此技能来测量性能基线、在PR前后检测回归,以及比较技术栈替代方案。 origin: ECC
Benchmark — 性能基线与回归检测
何时使用
- 在PR前后测量性能影响
- 为项目建立性能基线
- 当用户反馈"感觉很慢"时
- 发布前——确保满足性能目标
- 将你的技术栈与替代方案进行比较
工作原理
模式1:页面性能
通过浏览器 MCP 测量真实浏览器指标:
1. 导航到每个目标URL
2. 测量核心Web指标:
- LCP(最大内容绘制)— 目标 < 2.5s
- CLS(累积布局偏移)— 目标 < 0.1
- INP(交互到下一次绘制)— 目标 < 200ms
- FCP(首次内容绘制)— 目标 < 1.8s
- TTFB(首字节时间)— 目标 < 800ms
3. 测量资源大小:
- 总页面权重(目标 < 1MB)
- JS包大小(目标 < 200KB gzipped)
- CSS大小
- 图片权重
- 第三方脚本权重
4. 统计网络请求数
5. 检查渲染阻塞资源
模式2:API性能
对API端点进行基准测试:
1. 对每个端点请求100次
2. 测量:p50、p95、p99延迟
3. 追踪:响应大小、状态码
4. 负载测试:10个并发请求
5. 与SLA目标对比
模式3:构建性能
测量开发反馈循环:
1. 冷构建时间
2. 热重载时间(HMR)
3. 测试套件持续时间
4. TypeScript检查时间
5. Lint时间
6. Docker构建时间
模式4:前后对比
在变更前后运行以测量影响:
/benchmark baseline # 保存当前指标
# ... 进行变更 ...
/benchmark compare # 与基线对比
输出:
| 指标 | 之前 | 之后 | 差异 | 结论 |
|--------|--------|-------|-------|---------|
| LCP | 1.2s | 1.4s | +200ms | 警告: WARN |
| Bundle | 180KB | 175KB | -5KB | ✓ 改善 |
| Build | 12s | 14s | +2s | 警告: WARN |
输出
将基线存储在 .ecc/benchmarks/ 中作为JSON。通过Git追踪,团队共享基线。
集成
- CI:在每个PR上运行
/benchmark compare - 配合
/canary-watch进行部署后监控 - 配合
/browser-qa进行完整的发布前检查清单
兼容工具
Claude CodeCursor
标签
前端开发
