---
name: performance-expert
description: >
  性能优化专家。当用户需要进行前端性能优化、后端性能调优、数据库优化、性能监控、
  Core Web Vitals(LCP/FID/CLS)优化、首屏加载优化、内存优化、索引优化，
  或说 "性能优化"、"加载慢"、"响应慢" 时使用此技能。
allowed-tools: Read, Glob, Grep, Edit, Write, Bash, mcp__chrome-devtools, mcp__playwright
maturity: stable
last-reviewed: 2026-02-18
composable: true
  enhances: [sre-expert, database-tuning-expert, frontend-expert]
---

# 性能优化专家 (Performance Expert)

> **Output Style**: 本技能使用内联输出规范

资深性能优化工程师，精通前后端性能分析、优化策略和监控方案。

## 触发关键词

- **前端性能**: `首屏优化`, `加载慢`, `LCP`, `FCP`, `Core Web Vitals`
- **后端性能**: `响应慢`, `API慢`, `延迟高`, `吞吐量`
- **资源优化**: `内存优化`, `CPU优化`, `带宽优化`
- **数据库**: `查询慢`, `数据库优化`, `索引优化`
- **通用**: `性能优化`, `性能调优`, `性能问题`

## 前端性能优化

### Core Web Vitals
```yaml
LCP (Largest Contentful Paint):
  目标: < 2.5s
  优化:
    - 优化关键渲染路径
    - 预加载关键资源
    - 使用 CDN
    - 图片优化

FID (First Input Delay):
  目标: < 100ms
  优化:
    - 减少 JS 执行时间
    - 代码分割
    - Web Worker

CLS (Cumulative Layout Shift):
  目标: < 0.1
  优化:
    - 图片设置尺寸
    - 字体预加载
    - 避免动态插入内容
```

### 代码分割
```typescript
// 路由级别分割
const Dashboard = lazy(() => import('./pages/Dashboard'));

// 组件级别分割
const HeavyChart = lazy(() => import('./components/HeavyChart'));

// 条件加载
const AdminPanel = lazy(() => 
  user.isAdmin ? import('./AdminPanel') : import('./UserPanel')
);
```

### 图片优化
```typescript
// Next.js Image
import Image from 'next/image';

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  priority  // 关键图片预加载
  placeholder="blur"
  blurDataURL={blurUrl}
/>

// 响应式图片
<picture>
  <source srcSet="image.avif" type="image/avif" />
  <source srcSet="image.webp" type="image/webp" />
  <img src="image.jpg" alt="..." loading="lazy" />
</picture>
```

### 缓存策略
```typescript
// Service Worker 缓存
const CACHE_NAME = 'v1';
const STATIC_ASSETS = ['/app.js', '/styles.css'];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
  );
});

// HTTP 缓存头
Cache-Control: public, max-age=31536000, immutable  // 静态资源
Cache-Control: no-cache, must-revalidate           // API 响应
```

## 后端性能优化

### 数据库优化
```sql
-- 索引优化
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_orders_user_date ON orders(user_id, created_at DESC);

-- 查询分析
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 1;

-- 避免 N+1
SELECT u.*, o.* FROM users u
LEFT JOIN orders o ON o.user_id = u.id
WHERE u.id IN (1, 2, 3);
```

### 缓存层
```typescript
// Redis 缓存
async function getUserWithCache(userId: string) {
  const cacheKey = `user:${userId}`;
  
  // 先查缓存
  const cached = await redis.get(cacheKey);
  if (cached) return JSON.parse(cached);
  
  // 查数据库
  const user = await db.user.findUnique({ where: { id: userId } });
  
  // 写入缓存
  await redis.setex(cacheKey, 3600, JSON.stringify(user));
  
  return user;
}
```

### 连接池
```typescript
// 数据库连接池
const pool = new Pool({
  max: 20,           // 最大连接数
  min: 5,            // 最小连接数
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
});
```

## 性能监控

### 前端监控
```typescript
// Web Vitals 监控
import { onLCP, onFID, onCLS } from 'web-vitals';

onLCP((metric) => {
  analytics.send('LCP', metric.value);
});

onFID((metric) => {
  analytics.send('FID', metric.value);
});

onCLS((metric) => {
  analytics.send('CLS', metric.value);
});
```

### 后端监控
```typescript
// 请求耗时中间件
app.use((req, res, next) => {
  const start = Date.now();
  res.on('finish', () => {
    const duration = Date.now() - start;
    metrics.histogram('http_request_duration', duration, {
      method: req.method,
      path: req.path,
      status: res.statusCode,
    });
  });
  next();
});
```

## 性能检查清单

```markdown
### 前端
- [ ] 代码分割和懒加载
- [ ] 图片优化 (WebP/AVIF)
- [ ] 关键 CSS 内联
- [ ] 预加载关键资源
- [ ] 减少第三方脚本

### 后端
- [ ] 数据库索引
- [ ] 查询优化
- [ ] 缓存策略
- [ ] 连接池配置
- [ ] 异步处理

### 网络
- [ ] CDN 配置
- [ ] 压缩 (Gzip/Brotli)
- [ ] HTTP/2
- [ ] 缓存头设置
```

## 输出规范

- 量化性能指标
- 提供具体优化代码
- 说明优化效果预期
- 给出优先级建议

## 压测脚本生成

### k6 负载测试模板
```javascript
// load-test.js — k6 脚本
import http from 'k6/http';
import { check, sleep } from 'k6';

export const options = {
  stages: [
    { duration: '30s', target: 50 },   // Ramp-up
    { duration: '1m',  target: 50 },   // Steady
    { duration: '30s', target: 200 },  // Spike
    { duration: '1m',  target: 200 },  // Sustained peak
    { duration: '30s', target: 0 },    // Ramp-down
  ],
  thresholds: {
    http_req_duration: ['p(95)<500', 'p(99)<1000'], // 95%<500ms, 99%<1s
    http_req_failed: ['rate<0.01'],                  // 错误率<1%
  },
};

export default function () {
  const res = http.get('http://localhost:3000/api/health');
  check(res, {
    'status is 200': (r) => r.status === 200,
    'response time < 200ms': (r) => r.timings.duration < 200,
  });
  sleep(1);
}
// 运行: k6 run load-test.js
// 云端: k6 cloud run load-test.js
```

### Artillery 压测模板
```yaml
# artillery-config.yml
config:
  target: "http://localhost:3000"
  phases:
    - duration: 60
      arrivalRate: 10
      name: "Warm up"
    - duration: 120
      arrivalRate: 50
      name: "Sustained load"
  defaults:
    headers:
      Content-Type: "application/json"
scenarios:
  - name: "API health check"
    flow:
      - get:
          url: "/api/health"
          expect:
            - statusCode: 200
# 运行: npx artillery run artillery-config.yml
```

### 压测检查清单
- [ ] 基准测试: 单用户响应时间 baseline
- [ ] 阶梯加压: 10→50→100→200 并发
- [ ] 峰值测试: 设计容量 2x 突发
- [ ] 浸泡测试: 正常负载持续 4h+ (检测内存泄漏)
- [ ] 数据库连接池是否耗尽
- [ ] 文件句柄/Socket 是否泄漏
- [ ] GC 暂停是否影响 P99 延迟

## 禁止事项

- ❌ 不要过早优化
- ❌ 不要忽略监控数据
- ❌ 不要只优化不验证
- ❌ 不要忽视用户体验
- ❌ 不要在没有 baseline 的情况下做优化