Performance Skill Skill

Performance Skill

性能是功能的一部分 用户感知的响应时间决定产品体验

🎯 性能指标

前端指标

| 指标 | 目标 | 说明 | |:---|:---|:---| | FCP (First Contentful Paint) | < 1.8s | 首次内容渲染 | | LCP (Largest Contentful Paint) | < 2.5s | 最大内容渲染 | | FID (First Input Delay) | < 100ms | 首次输入延迟 | | CLS (Cumulative Layout Shift) | < 0.1 | 累积布局偏移 | | TTI (Time to Interactive) | < 3.8s | 可交互时间 |

后端指标

| 指标 | 目标 | 说明 | |:---|:---|:---| | 响应时间 | < 200ms | API 响应 | | 吞吐量 | 根据需求 | QPS | | 错误率 | < 0.1% | 5xx 错误 | | P99 延迟 | < 1s | 99分位延迟 |

🔍 性能问题检测

前端检测清单

## 前端性能检查

### 渲染性能
- [ ] 是否有不必要的重渲染？
- [ ] 列表是否使用了虚拟滚动？
- [ ] 大数据是否分页？
- [ ] 是否使用了 memo/useMemo/useCallback？

### 资源加载
- [ ] 图片是否压缩/懒加载？
- [ ] JS/CSS 是否分包？
- [ ] 是否使用了 CDN？
- [ ] 是否启用了缓存？

### 包体积
- [ ] 是否有未使用的依赖？
- [ ] 是否按需加载？
- [ ] 是否 tree-shaking？

后端检测清单

## 后端性能检查

### 数据库
- [ ] 是否有 N+1 查询？
- [ ] 索引是否合理？
- [ ] 是否有慢查询？
- [ ] 是否使用了连接池？

### 缓存
- [ ] 热点数据是否缓存？
- [ ] 缓存策略是否合理？
- [ ] 缓存是否会穿透？

### 并发
- [ ] 是否有竞态条件？
- [ ] 锁粒度是否合适？
- [ ] 是否有死锁风险？

🛠️ 常见优化方案

1. N+1 查询优化

// ❌ N+1 问题
const users = await User.findAll();
for (const user of users) {
  user.orders = await Order.findByUserId(user.id);
}

// ✅ 批量查询
const users = await User.findAll();
const userIds = users.map(u => u.id);
const orders = await Order.findByUserIds(userIds);
const orderMap = groupBy(orders, 'userId');
users.forEach(u => u.orders = orderMap[u.id] || []);

2. 循环中的异步优化

// ❌ 串行执行
for (const id of ids) {
  await processItem(id);
}

// ✅ 并行执行
await Promise.all(ids.map(id => processItem(id)));

// ✅ 控制并发数
import pLimit from 'p-limit';
const limit = pLimit(5);
await Promise.all(ids.map(id => limit(() => processItem(id))));

3. React 渲染优化

// ❌ 每次都创建新对象
<Component style={{ color: 'red' }} />

// ✅ 提取常量
const style = { color: 'red' };
<Component style={style} />

// ❌ 每次都创建新函数
<Button onClick={() => handleClick(id)} />

// ✅ 使用 useCallback
const handleClick = useCallback(() => {
  // ...
}, [id]);

4. 列表优化

// ❌ 渲染所有项
{items.map(item => <Item key={item.id} {...item} />)}

// ✅ 虚拟滚动（只渲染可见项）
import { FixedSizeList } from 'react-window';
<FixedSizeList
  height={400}
  itemCount={items.length}
  itemSize={50}
>
  {({ index, style }) => (
    <Item style={style} {...items[index]} />
  )}
</FixedSizeList>

5. 数据库索引

-- 分析慢查询
EXPLAIN ANALYZE SELECT * FROM users WHERE email = 'xxx';

-- 添加索引
CREATE INDEX idx_users_email ON users(email);

-- 复合索引
CREATE INDEX idx_orders_user_status ON orders(user_id, status);

6. 缓存策略

// 读取缓存
async function getUser(id) {
  // 1. 查缓存
  let user = await cache.get(`user:${id}`);
  if (user) return user;
  
  // 2. 查数据库
  user = await db.query('SELECT * FROM users WHERE id = ?', [id]);
  
  // 3. 写缓存
  await cache.set(`user:${id}`, user, { ttl: 3600 });
  
  return user;
}

📊 性能分析工具

前端

| 工具 | 用途 | |:---|:---| | Chrome DevTools | Performance/Network/Memory | | Lighthouse | 综合评分 | | Web Vitals | Core Web Vitals | | Bundle Analyzer | 包体积分析 |

后端

| 工具 | 用途 | |:---|:---| | 数据库 EXPLAIN | 查询分析 | | APM 工具 | 全链路追踪 | | 压测工具 | 性能基准 |

📋 性能优化清单

开发时

[ ] 避免 N+1 查询
[ ] 循环中不用 await
[ ] 合理使用 memo
[ ] 添加必要索引

上线前

[ ] 图片已压缩
[ ] 资源已压缩
[ ] 启用 gzip
[ ] 配置缓存头

定期审查

[ ] 分析慢查询
[ ] 检查内存使用
[ ] 评估缓存命中率
[ ] 关注 P99 延迟

⚠️ 性能反模式

// 记录到 Memory 中避免重复
memory.add({
  category: "forbidden_action",
  content: "禁止在循环中使用单独的 await",
  tags: ["performance", "async"]
})

memory.add({
  category: "forbidden_action",
  content: "禁止 SELECT * 查询大表",
  tags: ["performance", "database"]
})

🎯 优化优先级

1. 先测量，后优化
2. 优化影响最大的瓶颈
3. 不要过早优化
4. 权衡收益和复杂度

方法: 测量→分析→优化→验证 | 工具: DevTools + APM | 原则: 数据驱动

Agent Skills: Performance Skill

Install this agent skill to your local

Skill Files