Agent skill
performance
性能优化技能,识别和解决性能问题
Install this agent skill to your Project
npx add-skill https://github.com/WenJunDuan/Rlues/tree/main/vibeCoding/old version/claude/config-agent_v7.5/.claude/skills/performance
SKILL.md
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 | 原则: 数据驱动
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-teams
Path D 并行编排 — 子代理分工 + Agent Teams 协作。需要 CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1
tdd
Path 分级 TDD 策略
context7
E 阶段按需拉取库文档 — 用 ctx7 获取准确 API 信息
knowledge
跨会话经验管理 — 在 .ai_state 内沉淀和复用项目经验
code-quality
Rev 阶段 Plugin 编排顺序
verification
V 阶段 Path 分级验证清单
Didn't find tool you were looking for?