Initial commit
This commit is contained in:
Zhongwei Li
169
commands/analyze-performance.md
Normal file
169
commands/analyze-performance.md
Normal file
@@ -0,0 +1,169 @@
|
||||
## 性能分析
|
||||
|
||||
从用户体验角度分析应用程序性能，量化改进后的感知速度提升。基于 Core Web Vitals 计算 UX 评分，提出优先级明确的优化策略。
|
||||
|
||||
### UX 性能评分
|
||||
|
||||
```text
|
||||
用户体验评分: B+ (78/100)
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
⏱️ Core Web Vitals
|
||||
├─ LCP (加载): 2.3 秒 [Good] 目标<2.5 秒 ✅
|
||||
├─ FID (交互响应): 95ms [Good] 目标<100ms ✅
|
||||
├─ CLS (视觉稳定): 0.08 [Good] 目标<0.1 ✅
|
||||
├─ FCP (首次绘制): 1.8 秒 [Good] 目标<1.8 秒 ✅
|
||||
├─ TTFB (服务器): 450ms [Needs Work] 目标<200ms ⚠️
|
||||
└─ TTI (可交互): 3.5 秒 [Needs Work] 目标<3.8 秒 ⚠️
|
||||
|
||||
📊 用户感知速度
|
||||
├─ 首次显示体验: 2.3 秒 [行业平均: 3.0 秒]
|
||||
├─ 页面切换: 1.1 秒 [行业平均: 1.5 秒]
|
||||
├─ 搜索结果显示: 0.8 秒 [行业平均: 1.2 秒]
|
||||
├─ 表单提交: 1.5 秒 [行业平均: 2.0 秒]
|
||||
└─ 图片加载: 已实现延迟加载 ✅
|
||||
|
||||
😊 用户满意度预测
|
||||
├─ 跳出率预测: 12% (行业平均: 20%)
|
||||
├─ 完成率预测: 78% (目标: 85%)
|
||||
├─ 推荐 NPS: +24 (行业平均: +15)
|
||||
└─ 回访率: 65% (目标: 70%)
|
||||
|
||||
📊 用户体验影响
|
||||
├─ 显示速度缩短 0.5 秒 → 跳出率 -7%
|
||||
├─ 跳出率降低 5% → 会话时长 +15%
|
||||
├─ 搜索改进 → 停留时间 +15%
|
||||
└─ 综合 UX 改进度: +25%
|
||||
|
||||
🎯 改进预期效果 (优先级排序)
|
||||
├─ [P0] TTFB 改善 (CDN 引入) → LCP -0.3 秒 = 感知速度 +15%
|
||||
├─ [P1] JS 包优化 → TTI -0.8 秒 = 可交互时间 -20%
|
||||
├─ [P2] 图片优化 (WebP) → 传输量 -40% = 加载时间 -25%
|
||||
└─ [P3] 缓存策略 → 回访时速度提升 50%
|
||||
```
|
||||
|
||||
### 使用方法
|
||||
|
||||
```bash
|
||||
# UX 评分综合分析
|
||||
find . -name "*.js" -o -name "*.ts" | xargs wc -l | sort -rn | head -10
|
||||
"计算 UX 性能评分，评估 Core Web Vitals"
|
||||
|
||||
# 性能瓶颈检测
|
||||
grep -r "for.*await\|forEach.*await" . --include="*.js"
|
||||
"检测异步处理瓶颈，分析对用户体验的影响"
|
||||
|
||||
# 用户体验影响分析
|
||||
grep -r "addEventListener\|setInterval" . --include="*.js" | grep -v "removeEventListener\|clearInterval"
|
||||
"分析性能问题对用户体验的影响"
|
||||
```
|
||||
|
||||
### 基本示例
|
||||
|
||||
```bash
|
||||
# 包体积和加载时间
|
||||
npm ls --depth=0 && find ./public -name "*.js" -o -name "*.css" | xargs ls -lh
|
||||
"识别包体积和资源优化的改进点"
|
||||
|
||||
# 数据库性能
|
||||
grep -r "SELECT\|findAll\|query" . --include="*.js" | head -20
|
||||
"分析数据库查询的优化点"
|
||||
|
||||
# 依赖关系的性能影响
|
||||
npm outdated && npm audit
|
||||
"评估过时依赖对性能的影响"
|
||||
|
||||
```
|
||||
|
||||
### 分析视角
|
||||
|
||||
#### 1. 代码层面的问题
|
||||
|
||||
- **O(n²) 算法**: 检测低效的数组操作
|
||||
- **同步 I/O**: 识别阻塞处理
|
||||
- **重复处理**: 删除不必要的计算或请求
|
||||
- **内存泄漏**: 事件监听器和定时器管理
|
||||
|
||||
#### 2. 架构层面的问题
|
||||
|
||||
- **N+1 查询**: 数据库访问模式
|
||||
- **缓存不足**: 重复计算或 API 调用
|
||||
- **包体积**: 不必要的库或代码分割
|
||||
- **资源管理**: 连接池或线程使用量
|
||||
|
||||
#### 3. 技术债务带来的影响
|
||||
|
||||
- **遗留代码**: 旧实现导致的性能下降
|
||||
- **设计问题**: 责任分散不足导致的高耦合度
|
||||
- **测试不足**: 性能回归检测遗漏
|
||||
- **监控不足**: 问题早期发现体系
|
||||
|
||||
### 性能改进 ROI 矩阵
|
||||
|
||||
```text
|
||||
改进 ROI = (时间缩短效果 + 质量提升) ÷ 实现工时
|
||||
```
|
||||
|
||||
| 优先级 | 用户体验提升 | 实现难度 | 时间缩短效果 | 具体示例 | 工时 | 效果 |
|
||||
| --------------------- | ------------ | -------- | ------------ | -------- | ---- | --------- |
|
||||
| **[P0] 应立即实现** | 高 | 低 | > 50% | CDN 引入 | 8h | 响应 -60% |
|
||||
| **[P1] 建议早期实现** | 高 | 中 | 20-50% | 图片优化 | 16h | 加载 -30% |
|
||||
| **[P2] 计划性实现** | 低 | 高 | 10-20% | 代码分割 | 40h | 首次 -15% |
|
||||
| **[P3] 暂缓/观望** | 低 | 低 | < 10% | 微调优化 | 20h | 局部 -5% |
|
||||
|
||||
#### 优先级判定标准
|
||||
|
||||
- **P0(立即实现)**: UX 提升「高」× 难度「低」= ROI 最大
|
||||
- **P1(早期实现)**: UX 提升「高」× 难度「中」= ROI 高
|
||||
- **P2(计划性)**: UX 提升「低」× 难度「高」= ROI 中
|
||||
- **P3(暂缓)**: UX 提升「低」× 难度「低」= ROI 低
|
||||
|
||||
### 测量和工具
|
||||
|
||||
#### Node.js / JavaScript
|
||||
|
||||
```bash
|
||||
# 性能分析
|
||||
node --prof app.js
|
||||
clinic doctor -- node app.js
|
||||
|
||||
# 包分析
|
||||
npx webpack-bundle-analyzer
|
||||
lighthouse --chrome-flags="--headless"
|
||||
```
|
||||
|
||||
#### 数据库
|
||||
|
||||
```sql
|
||||
-- 查询分析
|
||||
EXPLAIN ANALYZE SELECT ...
|
||||
SHOW SLOW LOG;
|
||||
```
|
||||
|
||||
#### 前端
|
||||
|
||||
```bash
|
||||
# React 性能
|
||||
grep -r "useMemo\|useCallback" . --include="*.jsx"
|
||||
|
||||
# 资源分析
|
||||
find ./src -name "*.png" -o -name "*.jpg" | xargs ls -lh
|
||||
```
|
||||
|
||||
### 性能指标与 UX 改进相关性
|
||||
|
||||
| 指标 | 改进幅度 | 感知速度提升 | 用户满意度 | 实现工时 |
|
||||
| ------------------ | -------- | ------------ | ------------- | -------- |
|
||||
| **LCP (加载)** | -0.5 秒 | +30% | 跳出率 -7% | 16h |
|
||||
| **FID (交互响应)** | -50ms | +15% | 压力感 -20% | 8h |
|
||||
| **CLS (视觉稳定)** | -0.05 | +10% | 误操作 -50% | 4h |
|
||||
| **TTFB (服务器)** | -200ms | +25% | 感知速度 +40% | 24h |
|
||||
| **TTI (可交互)** | -1.0 秒 | +35% | 完成率 +15% | 32h |
|
||||
| **包体积** | -30% | +20% | 首次访问 +25% | 16h |
|
||||
|
||||
### 持续改进
|
||||
|
||||
- **定期审计**: 每周性能测试执行
|
||||
- **指标收集**: 响应时间、内存使用量追踪
|
||||
- **告警设置**: 阈值超过时自动通知
|
||||
- **团队共享**: 改进案例和反模式文档化
|
||||
Reference in New Issue
Block a user