performance

性能

此技能提供全面的性能能力，包括性能分析、优化、负载测试、压力测试、容量规划和特定框架的性能模式。

何时使用此技能

• 识别性能瓶颈时
• 调查内存泄漏或内存占用过高时
• 优化缓慢的数据库查询时
• 分析前端性能（Core Web Vitals、包大小）时
• 设置性能监控时
• 部署前进行性能审计时
• 创建负载测试场景时
• 分析压力下的性能时
• 识别负载下的系统瓶颈时
• 规划容量时
• 设置性能基准时
• 优化 React 渲染性能时
• 减小包大小时
• 改善 Core Web Vitals（LCP、FID、CLS）时
• 修复 React 应用中的内存泄漏时
• 实现高级 React 模式时

此技能的功能

1. 性能剖析：分析 CPU、内存和网络性能
2. 瓶颈识别：定位具体的性能问题
3. 内存分析：检测内存泄漏和内存占用过高的问题
4. 数据库优化：识别缓慢的查询和优化机会
5. 前端分析：分析包大小、渲染性能和 Core Web Vitals
6. 负载测试：创建并执行负载测试场景
7. 压力测试：识别临界点和限制
8. 容量规划：分析可扩展性和容量
9. React 优化：优化 React 渲染、包大小和 Core Web Vitals
10. 监控设置：创建性能监控和告警

使用方法

分析性能

Analyze the performance of this application and identify bottlenecks

Profile the memory usage and find any leaks

创建负载测试

Create load test scenarios for this API

Test performance under 1000 concurrent users

优化 React 应用

Optimize this React app for better performance

Analyze bundle size and reduce it

分析领域

应用性能

需要跟踪的指标：

• 响应时间和延迟
• 吞吐量（每秒请求数）
• 错误率
• CPU 利用率
• 内存使用模式

常见问题：

• 缓慢的 API 端点
• CPU 使用率过高
• 内存泄漏
• 算法效率低下
• 阻塞操作

数据库性能

分析重点：

• 识别缓慢的查询
• 缺少索引
• N+1 查询问题
• 连接池耗尽
• 锁竞争

工具：

• 查询执行计划（EXPLAIN ANALYZE）
• 慢查询日志
• 数据库监控工具
• 连接池指标

前端性能

Core Web Vitals：

• 最大内容绘制（LCP）< 2.5s
• 首次输入延迟（FID）< 100ms
• 累积布局偏移（CLS）< 0.1

包分析：

• 优化包大小
• 代码拆分机会
• 移除未使用的代码
• 优化资源

React 性能

渲染优化：

• 使用 React.memo 缓存组件
• 使用 useMemo 缓存开销大的计算结果
• 使用 useCallback 缓存函数
• 对长列表进行虚拟化
• 代码拆分和延迟加载

包优化：

• 按路由拆分代码
• 延迟加载组件
• 摇树优化移除未使用的代码
• 动态导入
• 包分析

性能测试

负载测试

目的：在预期负载下测试系统
指标：响应时间、吞吐量、错误率
工具：k6、Artillery、JMeter、Locust

示例（k6）：

import http from 'k6/http';
import { check } from 'k6';

export const options = {
  stages: [
    { duration: '2m', target: 100 }, // Ramp up
    { duration: '5m', target: 100 }, // Stay at 100
    { duration: '2m', target: 200 }, // Ramp up to 200
    { duration: '5m', target: 200 }, // Stay at 200
    { duration: '2m', target: 0 },   // Ramp down
  ],
};

export default function() {
  const res = http.get('https://api.example.com/users');
  check(res, {
    'status is 200': (r) => r.status === 200,
    'response time < 500ms': (r) => r.timings.duration < 500,
  });
}

压力测试

目的：找出临界点
指标：最大容量、故障点
方法：逐步增加负载，直到系统发生故障

容量规划

目的：确定资源需求
指标：资源利用率、扩展需求
分析：当前容量与未来需求的对比

分析流程

1. 建立基线

测量当前性能：

• 响应时间百分位数（p50、p90、p95、p99）
• 吞吐量指标
• 错误率
• 资源利用率（CPU、内存、网络）

设定目标：

• 定义可接受的性能阈值
• 设定 SLA 目标
• 识别关键路径

2. 识别瓶颈

性能分析技术：

• CPU 性能分析，用于查找热点函数
• 内存性能分析，用于查找泄漏
• 网络分析，用于检查 API 调用
• 数据库查询分析

瓶颈模式：

• 单个操作缓慢（算法复杂度）
• 大量小操作（N+1 查询）
• 资源争用（锁、连接池）
• 内存泄漏（逐渐增长）

3. 分析根本原因

调查步骤：

1. 找出缓慢的操作
2. 测量其性能
3. 分析它缓慢的原因
4. 检查优化机会
5. 验证修复是否提升了性能

4. 提供优化建议

建议应包括：

• 具体的代码更改
• 优化前后的性能指标
• 实施步骤
• 预期影响
• 风险评估

示例

示例 1：API 性能分析

输入：API 端点 /api/users 响应缓慢

输出：

## Performance Analysis: /api/users

### Current Performance
- **Average Response Time**: 2.3s
- **P95 Response Time**: 4.1s
- **Throughput**: 45 req/s
- **Error Rate**: 2%

### Bottleneck Identified
**Issue**: N+1 query problem in user data fetching
- **Location**: `src/routes/users.js:34`
- **Pattern**: One query for users, then N queries for each user's posts

### Root Cause
```javascript
// Current implementation
const users = await db.users.findAll();
for (const user of users) {
  user.posts = await db.posts.findByUserId(user.id); // N+1 queries
}

优化

// Optimized with eager loading
const users = await db.users.findAll({
  include: [{ model: Post, as: 'posts' }] // Single query with JOIN
});

预期影响

• 响应时间：2.3s → 0.3s（提升 87%）
• 数据库查询：101 → 1（减少 99%）
• 吞吐量：45 → 200+ req/s

### Example 2: React Component Optimization

**Input**: Optimize expensive component

**Output**:
```markdown
## React Performance: Component Optimization

### Issue
Component re-renders on every parent update, even when props haven't changed.

### Optimization
```javascript
// Before: Re-renders unnecessarily
function ExpensiveComponent({ data, config }) {
  const processed = data
    .filter(item => item.active)
    .map(item => processComplex(item, config));

  return <Chart data={processed} />;
}

// After: Memoized to prevent unnecessary re-renders
const ExpensiveComponent = React.memo(({ data, config }) => {
  const processed = useMemo(() => {
    return data
      .filter(item => item.active)
      .map(item => processComplex(item, config));
  }, [data, config]);

  return <Chart data={processed} />;
});

影响

• 重新渲染次数从 100% 降至 5%
• 性能提升：速度提高 80%

## Reference Files

For framework-specific performance patterns and detailed guidance, load reference files as needed:

- **`references/framework_patterns.md`** - Performance patterns for Node.js, React, databases, APIs, frontend, and monitoring strategies (from performance-analysis)
- **`references/react_patterns.md`** - React-specific performance optimization patterns, memoization strategies, bundle optimization, and Core Web Vitals improvements
- **`references/load_testing.md`** - Load testing and stress testing patterns, tools, scenarios, and capacity planning strategies
- **`references/PERFORMANCE_ANALYSIS.template.md`** - Performance analysis report template with load profiles, bottlenecks, and recommendations

When analyzing performance for specific frameworks or conducting load tests, load the appropriate reference file.

## Best Practices

### Performance Analysis Approach

1. **Measure First**: Always establish baseline metrics
2. **Profile Before Optimizing**: Identify actual bottlenecks
3. **Optimize Incrementally**: Make one change at a time
4. **Verify Improvements**: Measure after each optimization
5. **Monitor Continuously**: Set up ongoing performance monitoring

### Common Optimizations

**Application:**
- Optimize algorithms (reduce complexity)
- Add caching layers
- Use connection pooling
- Implement request batching
- Add rate limiting

**Database:**
- Add appropriate indexes
- Optimize queries (avoid N+1)
- Use query result caching
- Implement read replicas
- Optimize connection pooling

**Frontend:**
- Code splitting and lazy loading
- Image optimization
- Bundle size reduction
- Minimize re-renders
- Optimize asset loading

**React:**
- Measure before optimizing
- Memoize strategically (don't over-memoize)
- Code split by route and feature
- Lazy load components on demand
- Monitor performance metrics

### Monitoring Setup

**Key Metrics:**
- Response time percentiles
- Error rates
- Throughput
- Resource utilization
- Custom business metrics

**Alerting:**
- Alert on performance degradation
- Alert on error rate spikes
- Alert on resource exhaustion
- Alert on SLA violations

## Related Use Cases

- Performance audits
- Optimization projects
- Capacity planning
- Performance regression detection
- Production performance monitoring
- Load testing analysis
- React app optimization
- Bundle size reduction
- Core Web Vitals improvement
- Memory leak fixes
- Rendering performance optimization