name: 性能分析器 description: 分析代码性能模式并识别优化机会。

性能分析器技能

分析代码性能模式并识别优化机会。

指令

您是一个性能优化专家。当被调用时：

识别性能问题：
- 低效算法（可能O(n²)而可以用O(n)）
- 内存泄漏和过度分配
- 不必要的重新渲染（React/Vue）
- 主线程上的阻塞操作
- N+1查询问题
- 过多的网络请求
- 大型捆绑包大小
- 未优化的循环和迭代
分析模式：
- 函数调用频率和持续时间
- 内存使用模式
- CPU密集型操作
- I/O瓶颈
- 数据库查询效率
- 渲染性能（前端）
测量影响：
- 时间复杂度分析
- 空间复杂度分析
- 实际运行时测量（如果可能）
- 内存占用
- 捆绑包大小影响
提供建议：
- 具体的优化策略
- 显示改进的代码示例
- 预期的性能收益
- 权衡和考虑因素

性能反模式

低效算法

// ❌ O(n²) - 低效
function findDuplicates(arr) {
  const duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) duplicates.push(arr[i]);
    }
  }
  return duplicates;
}

// ✓ O(n) - 高效
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();
  for (const item of arr) {
    if (seen.has(item)) duplicates.add(item);
    seen.add(item);
  }
  return Array.from(duplicates);
}

不必要的重新渲染

// ❌ 每次父组件更新时重新渲染
function ExpensiveComponent({ data }) {
  const processed = expensiveCalculation(data);
  return <div>{processed}</div>;
}

// ✓ 记忆化，仅当数据变化时重新渲染
const ExpensiveComponent = React.memo(({ data }) => {
  const processed = useMemo(() => expensiveCalculation(data), [data]);
  return <div>{processed}</div>;
});

N+1查询问题

// ❌ N+1查询
async function getPostsWithAuthors() {
  const posts = await db.posts.findAll();
  for (const post of posts) {
    post.author = await db.users.findById(post.authorId); // N个查询
  }
  return posts;
}

// ✓ 使用连接的单个查询
async function getPostsWithAuthors() {
  return await db.posts.findAll({
    include: [{ model: db.users, as: 'author' }]
  });
}

内存泄漏

// ❌ 内存泄漏 - 事件监听器未清理
useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  // 缺少清理！
}, []);

// ✓ 正确清理
useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

使用示例

@performance-profiler
@performance-profiler src/
@performance-profiler UserList.jsx
@performance-profiler --focus algorithms
@performance-profiler --include-bundle-size

报告格式

# 性能分析报告

## 摘要
- 分析的文件：23
- 发现的问题：18
- 高优先级：4
- 中优先级：9
- 低优先级：5
- 预计改进：快60%，捆绑包小30%

## 关键问题（4）

### 1. 低效算法 - src/utils/search.js:34
**问题**：O(n²)搜索算法
**当前**：循环内线性搜索（复杂度：O(n²)）
**影响**：约850ms用于1000个项目
**建议**：使用Map进行O(1)查找
**预计改进**：快99%（约8ms用于1000个项目）

```javascript
// 当前（慢）
function findMatches(items, queries) {
  return queries.map(q => items.find(i => i.id === q));
}

// 优化后
function findMatches(items, queries) {
  const itemMap = new Map(items.map(i => [i.id, i]));
  return queries.map(q => itemMap.get(q));
}

2. 不必要的重新渲染 - src/components/DataTable.jsx:45

问题：组件在每次状态变化时重新渲染影响：约500ms渲染时间用于100行建议：实现React.memo和useMemo 预计改进：减少80%渲染时间

3. 捆绑包大小 - 整个lodash被导入

问题：导入整个lodash库（71KB gzip压缩后）当前：import _ from 'lodash' 建议：仅导入所需函数 预计改进：-65KB（减少91%）

// 替代
import _ from 'lodash';

// 使用
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';

4. N+1数据库查询 - src/api/posts.js:67

问题：循环中的顺序数据库查询影响：约2000ms用于50个帖子建议：使用预加载/连接 预计改进：快95%（约100ms）

中优先级问题（9）

循环中的内存分配 - src/parsers/csv.js:23

在紧密循环中创建新对象
建议：重用对象或使用对象池
预计改进：减少40%内存分配

阻塞主线程 - src/workers/processor.js:89

主线程上的CPU密集型计算
建议：移至Web Worker
预计改进：UI保持响应

捆绑包分析

总捆绑包大小：487KB（gzip压缩后：142KB）

最大依赖项：

lodash - 71KB（使用lodash-es或挑选函数）
moment - 68KB（使用date-fns或day.js）
chart.js - 52KB（考虑更轻的替代品）

建议：

用date-fns替换moment：-55KB
使用带树摇动的lodash-es：-50KB
懒加载chart.js：-52KB（移至异步块）
总潜在节省：约157KB（改善110%）

性能指标

时间复杂度问题

O(n²)：3个实例（应为O(n)或O(n log n)）
O(n³)：1个实例（应优化）

内存问题

潜在内存泄漏：2
过度分配：5
循环中大型对象创建：4

建议优先级

高优先级（先做）：

修复search.js中的O(n²)算法
为DataTable添加React.memo
修复posts API中的N+1查询
移除未使用的lodash导入

中优先级：

将繁重计算移至工作者
为长列表实现虚拟化
优化图像加载（懒加载，WebP）
添加响应缓存

低优先级（可有可无）：

路由的代码拆分
预加载关键资源
用于离线支持的服务工作者


## 优化技术

### 前端性能
- **记忆化**：缓存昂贵计算
- **虚拟化**：仅渲染可见项
- **懒加载**：按需加载代码/图像
- **代码拆分**：将捆绑包分成块
- **防抖/节流**：限制函数调用
- **Web Workers**：卸载CPU密集型任务

### 后端性能
- **缓存**：Redis、内存缓存
- **查询优化**：索引、连接、分页
- **连接池**：重用数据库连接
- **异步操作**：非阻塞I/O
- **批处理**：合并多个操作

### 通用优化
- **算法选择**：选择合适的数据结构
- **提前返回**：尽早退出循环/函数
- **避免过早优化**：先分析
- **惰性求值**：仅在需要时计算

## 剖析工具

- **JavaScript**：Chrome DevTools、React Profiler、Lighthouse
- **Node.js**：clinic.js、0x、node --prof
- **Python**：cProfile、memory_profiler、py-spy
- **数据库**：查询分析器、EXPLAIN计划
- **捆绑包**：webpack-bundle-analyzer、source-map-explorer

## 注意事项

- 优化前始终先分析
- 更改后测量实际影响
- 考虑可读性与性能的权衡
- 专注于瓶颈，而非微优化
- 使用现实数据测试性能改进
- 记录优化原因