AI 辅助的性能优化

性能问题可能难以捉摸且耗时诊断。AI 助手擅长分析代码模式、识别瓶颈和建议优化。本指南展示如何利用 AI 进行性能工作。

AI 辅助的性能分析

请求性能审查

你：分析这个函数的性能问题：

function processOrders(orders) {
  const results = [];
  for (const order of orders) {
    const user = users.find(u => u.id === order.userId);
    const products = order.items.map(item =>
      products.find(p => p.id === item.productId)
    );
    results.push({ order, user, products });
  }
  return results;
}

Claude：我发现了几个性能问题：

1. **O(n²) 复杂度** - 循环内的 `users.find()`
2. **O(n³) 复杂度** - map 内嵌套的 `products.find()`
3. **无提前终止** - 即使需要限制也处理所有订单

这是优化后的 O(n) 复杂度版本...

使用 /perf 技能

hljs bash
# 分析文件
/perf src/services/orderService.js

# 带特定焦点的分析
/perf --focus memory src/utils/dataProcessor.js

# 生成性能报告
/perf --report src/

常见性能模式

模式 1：循环优化

优化前 (O(n²))：

hljs javascript
function findMatches(items, targets) {
  return items.filter(item =>
    targets.includes(item.id)  // 每个 item 都是 O(n)
  );
}

优化后 (O(n))：

hljs javascript
function findMatches(items, targets) {
  const targetSet = new Set(targets);  // 一次 O(n)
  return items.filter(item =>
    targetSet.has(item.id)  // 每个 item 都是 O(1)
  );
}

模式 2：记忆化

优化前：

hljs javascript
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
// fibonacci(40) 需要约 1 秒

优化后：

hljs javascript
function fibonacci(n, memo = {}) {
  if (n in memo) return memo[n];
  if (n <= 1) return n;
  memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
  return memo[n];
}
// fibonacci(40) 需要约 0.001ms

模式 3：懒加载

优化前：

hljs javascript
// 预先加载所有内容
import { Chart, Table, Form, Modal, DatePicker } from 'heavy-ui-lib';

优化后：

hljs javascript
// 需要时才加载
const Chart = lazy(() => import('heavy-ui-lib/Chart'));
const Table = lazy(() => import('heavy-ui-lib/Table'));

模式 4：数据库查询优化

优化前 (N+1 问题)：

hljs javascript
const orders = await Order.findAll();
for (const order of orders) {
  order.user = await User.findById(order.userId);  // N 次查询
}

优化后 (预加载)：

hljs javascript
const orders = await Order.findAll({
  include: [{ model: User, as: 'user' }]  // 1 次带 JOIN 的查询
});

React 性能优化

识别重渲染问题

让 Claude 分析组件渲染：

你：为什么这个组件可能过度重渲染？

function ProductList({ products, onSelect }) {
  return (
    <ul>
      {products.map(product => (
        <ProductItem
          key={product.id}
          product={product}
          onClick={() => onSelect(product.id)}
        />
      ))}
    </ul>
  );
}

优化技术

1. 记忆化回调：

hljs jsx
function ProductList({ products, onSelect }) {
  const handleClick = useCallback((id) => {
    onSelect(id);
  }, [onSelect]);

  return (
    <ul>
      {products.map(product => (
        <ProductItem
          key={product.id}
          product={product}
          onClick={handleClick}
        />
      ))}
    </ul>
  );
}

2. 记忆化组件：

hljs jsx
const ProductItem = memo(function ProductItem({ product, onClick }) {
  return (
    <li onClick={() => onClick(product.id)}>
      {product.name}
    </li>
  );
});

3. 虚拟化长列表：

hljs jsx
import { FixedSizeList } from 'react-window';

function ProductList({ products }) {
  return (
    <FixedSizeList
      height={400}
      itemCount={products.length}
      itemSize={50}
    >
      {({ index, style }) => (
        <div style={style}>
          {products[index].name}
        </div>
      )}
    </FixedSizeList>
  );
}

后端性能

API 响应优化

你：如何优化这个耗时 2+ 秒的 API 端点？

async function getOrderDetails(orderId) {
  const order = await Order.findById(orderId);
  const user = await User.findById(order.userId);
  const items = await OrderItem.findAll({ orderId });
  const products = await Promise.all(
    items.map(item => Product.findById(item.productId))
  );
  return { order, user, items, products };
}

优化版本：

hljs javascript
async function getOrderDetails(orderId) {
  // 尽可能并行查询
  const [order, items] = await Promise.all([
    Order.findById(orderId, {
      include: [{ model: User, as: 'user' }]
    }),
    OrderItem.findAll({
      where: { orderId },
      include: [{ model: Product, as: 'product' }]
    })
  ]);

  return {
    order,
    user: order.user,
    items: items.map(item => ({
      ...item,
      product: item.product
    }))
  };
}
// 从 5 次查询减少到 2 次

缓存策略

hljs javascript
// 让 Claude 实现缓存
const cache = new Map();
const CACHE_TTL = 60000; // 1 分钟

async function getCachedUser(userId) {
  const cacheKey = `user:${userId}`;
  const cached = cache.get(cacheKey);

  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
    return cached.data;
  }

  const user = await User.findById(userId);
  cache.set(cacheKey, { data: user, timestamp: Date.now() });
  return user;
}

使用 AI 进行性能分析

解读分析器输出

你：这是我的 Chrome DevTools 性能分析摘要。
我应该关注什么？

- 脚本执行：2,450ms
- 渲染：890ms
- 绘制：120ms
- 系统：340ms
- 空闲：1,200ms

按自身时间排序的顶级函数：
1. processData: 890ms
2. renderChart: 450ms
3. JSON.parse: 380ms
4. calculateTotals: 290ms

Claude：根据这个分析，我建议关注：

1. **processData (890ms)** - 这是你最大的瓶颈。
   考虑使用 Web Workers 或对大数据集进行分块处理。

2. **JSON.parse (380ms)** - 大型 JSON 负载。
   考虑流式 JSON 解析或分页。

3. **renderChart (450ms)** - 图表渲染开销大。
   考虑基于 canvas 的图表或减少数据点。

内存泄漏检测

你：我的应用内存使用随时间增长。如何找到泄漏？

Claude：这是系统化的方法：

1. **间隔拍摄堆快照**
2. **比较快照**找到增长的对象
3. **检查常见原因：**
   - 未移除的事件监听器
   - 持有引用的闭包
   - 未清除的定时器
   - 未移除的 DOM 节点

让我分析你的代码找潜在泄漏...

性能测试

使用 AI 进行负载测试

你：使用 k6 为我的 API 生成负载测试

Claude：这是一个全面的负载测试：

hljs javascript
// load-test.js
import http from 'k6/http';
import { check, sleep } from 'k6';

export const options = {
  stages: [
    { duration: '30s', target: 20 },   // 升压
    { duration: '1m', target: 20 },    // 保持 20
    { duration: '30s', target: 50 },   // 升到 50
    { duration: '1m', target: 50 },    // 保持 50
    { duration: '30s', target: 0 },    // 降压
  ],
  thresholds: {
    http_req_duration: ['p(95)<500'],  // 95% 在 500ms 以下
    http_req_failed: ['rate<0.01'],    // <1% 错误
  },
};

export default function () {
  const res = http.get('https://api.example.com/orders');

  check(res, {
    '状态码是 200': (r) => r.status === 200,
    '响应时间 < 500ms': (r) => r.timings.duration < 500,
  });

  sleep(1);
}

性能检查清单

前端

• 分析并优化包大小
• 优化图片并懒加载
• 实现代码分割
• 内联关键 CSS
• 使用 Service Worker 缓存
• 长列表使用虚拟滚动

后端

• 优化数据库查询（无 N+1）
• 创建适当的索引
• 实现响应缓存
• 配置连接池
• 并行化异步操作
• 最小化负载大小

基础设施

• 为静态资源配置 CDN
• 启用 Gzip/Brotli 压缩
• 启用 HTTP/2 或 HTTP/3
• 设置数据库连接限制
• 配置自动扩展

总结

AI 助手是性能优化的强大盟友。它们可以：

• 快速识别常见反模式
• 建议经过验证的优化技术
• 生成性能测试
• 解读分析数据

关键是提供足够的关于性能目标和约束的上下文。

下一步：探索团队协作，在团队中分享性能最佳实践。