perf

Instructions

Implementation Reference

• src/tools/perf.ts:2-361 (handler)

  The core handler function for the 'perf' tool. It takes args with code and type, constructs an extensive performance analysis prompt including guidelines, examples for algorithm, memory, React, database optimizations, benchmarks, and returns it as MCP content for LLM processing.

  export async function perf(args: any) {
    try {
      const code = args?.code || "";
      const type = args?.type || "all"; // algorithm, memory, react, database
  
      const message = `请分析以下代码的性能问题并提供优化建议：
  
  📝 **代码内容**：
  ${code || "请提供需要性能分析的代码"}
  
  🎯 **分析重点**：${type}
  
  ---
  
  ## 性能分析流程
  
  ### 第一步：识别性能瓶颈
  
  **常见性能问题**：
  1. **时间复杂度过高**
     - 嵌套循环 O(n²) 或更差
     - 未优化的算法
     - 重复计算
  
  2. **空间复杂度问题**
     - 内存泄漏
     - 大对象频繁创建
     - 缓存滥用
  
  3. **I/O 阻塞**
     - 同步 I/O 操作
     - 未使用连接池
     - 缺少缓存机制
  
  4. **渲染性能**
     - 不必要的重渲染
     - 大列表未虚拟化
     - 图片未优化
  
  ---
  
  ## 性能优化指南
  
  ### 1️⃣ 算法优化
  
  **复杂度分析**：
  \`\`\`
  O(1)    - 常数时间      ✅ 最优
  O(log n) - 对数时间      ✅ 很好
  O(n)     - 线性时间      ✅ 良好
  O(n log n) - 线性对数   ⚠️ 可接受
  O(n²)    - 平方时间      ⚠️ 注意
  O(2ⁿ)    - 指数时间      ❌ 避免
  O(n!)    - 阶乘时间      ❌ 严禁
  \`\`\`
  
  **优化技巧**：
  
  **示例 1：使用 Map 替代数组查找**
  \`\`\`typescript
  // Before - 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;
  }
  
  // After - O(n)
  function findDuplicates(arr) {
    const seen = new Map();
    const duplicates = new Set();
    
    for (const item of arr) {
      if (seen.has(item)) {
        duplicates.add(item);
      } else {
        seen.set(item, true);
      }
    }
    
    return Array.from(duplicates);
  }
  \`\`\`
  
  **示例 2：缓存计算结果**
  \`\`\`typescript
  // Before - 重复计算
  function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
  
  // After - 使用 memoization
  const memo = new Map();
  function fibonacci(n) {
    if (n <= 1) return n;
    if (memo.has(n)) return memo.get(n);
    
    const result = fibonacci(n - 1) + fibonacci(n - 2);
    memo.set(n, result);
    return result;
  }
  \`\`\`
  
  ### 2️⃣ 内存优化
  
  **避免内存泄漏**：
  \`\`\`typescript
  // ❌ 内存泄漏
  class EventManager {
    listeners = [];
    
    addEventListener(listener) {
      this.listeners.push(listener);
      // 忘记移除监听器
    }
  }
  
  // ✅ 正确做法
  class EventManager {
    listeners = new Set();
    
    addEventListener(listener) {
      this.listeners.add(listener);
    }
    
    removeEventListener(listener) {
      this.listeners.delete(listener);
    }
    
    destroy() {
      this.listeners.clear();
    }
  }
  \`\`\`
  
  **对象池复用**：
  \`\`\`typescript
  // ❌ 频繁创建对象
  for (let i = 0; i < 10000; i++) {
    const obj = { x: i, y: i * 2 };
    process(obj);
  }
  
  // ✅ 对象池
  class ObjectPool {
    pool = [];
    
    acquire() {
      return this.pool.pop() || {};
    }
    
    release(obj) {
      this.pool.push(obj);
    }
  }
  
  const pool = new ObjectPool();
  for (let i = 0; i < 10000; i++) {
    const obj = pool.acquire();
    obj.x = i;
    obj.y = i * 2;
    process(obj);
    pool.release(obj);
  }
  \`\`\`
  
  ### 3️⃣ React 性能优化
  
  **useMemo 和 useCallback**：
  \`\`\`typescript
  // ❌ 每次渲染都创建新函数
  function MyComponent({ data }) {
    const processedData = expensiveComputation(data);
    const handleClick = () => { /* ... */ };
    
    return <ChildComponent data={processedData} onClick={handleClick} />;
  }
  
  // ✅ 使用 hooks 优化
  function MyComponent({ data }) {
    const processedData = useMemo(
      () => expensiveComputation(data),
      [data]
    );
    
    const handleClick = useCallback(() => {
      /* ... */
    }, []);
    
    return <ChildComponent data={processedData} onClick={handleClick} />;
  }
  \`\`\`
  
  **React.memo 避免重渲染**：
  \`\`\`typescript
  // ✅ 使用 memo
  const ChildComponent = React.memo(({ data, onClick }) => {
    return <div onClick={onClick}>{data}</div>;
  });
  \`\`\`
  
  **虚拟列表**：
  \`\`\`typescript
  // ❌ 渲染 10000 个元素
  function List({ items }) {
    return (
      <div>
        {items.map(item => <Item key={item.id} data={item} />)}
      </div>
    );
  }
  
  // ✅ 使用虚拟列表
  import { FixedSizeList } from 'react-window';
  
  function List({ items }) {
    return (
      <FixedSizeList
        height={600}
        itemCount={items.length}
        itemSize={50}
      >
        {({ index, style }) => (
          <div style={style}>
            <Item data={items[index]} />
          </div>
        )}
      </FixedSizeList>
    );
  }
  \`\`\`
  
  ### 4️⃣ 数据库优化
  
  **添加索引**：
  \`\`\`sql
  -- Before
  SELECT * FROM users WHERE email = 'user@example.com';
  
  -- After
  CREATE INDEX idx_users_email ON users(email);
  SELECT * FROM users WHERE email = 'user@example.com';
  \`\`\`
  
  **查询优化**：
  \`\`\`typescript
  // ❌ N+1 查询
  const users = await User.findAll();
  for (const user of users) {
    user.posts = await Post.findAll({ where: { userId: user.id } });
  }
  
  // ✅ 使用 JOIN
  const users = await User.findAll({
    include: [{ model: Post }]
  });
  \`\`\`
  
  **批量操作**：
  \`\`\`typescript
  // ❌ 逐条插入
  for (const item of items) {
    await db.insert(item);
  }
  
  // ✅ 批量插入
  await db.insertMany(items);
  \`\`\`
  
  ---
  
  ## 性能测试
  
  ### Benchmark 测试
  \`\`\`typescript
  console.time('operation');
  // 执行操作
  console.timeEnd('operation');
  
  // 或使用 performance API
  const start = performance.now();
  // 执行操作
  const end = performance.now();
  console.log(\`耗时: \${end - start}ms\`);
  \`\`\`
  
  ### 性能指标
  
  **目标值**：
  - 首屏加载：< 1s
  - 交互响应：< 100ms
  - 动画帧率：60 FPS
  - API 响应：< 200ms
  
  ---
  
  ## 性能优化报告模板
  
  ### 📊 性能分析
  
  **当前性能**：
  - 时间复杂度：O(n²)
  - 内存占用：150MB
  - 响应时间：800ms
  
  **瓶颈识别**：
  1. 嵌套循环导致复杂度过高
  2. 未缓存计算结果
  3. 数组查找效率低
  
  ### 🎯 优化方案
  
  **方案 1：算法优化**
  - 使用 Map 替代数组
  - 预期提升：70%
  
  **方案 2：添加缓存**
  - 使用 memoization
  - 预期提升：50%
  
  ### 📈 优化效果
  
  **优化后性能**：
  - 时间复杂度：O(n)
  - 内存占用：50MB ↓ 67%
  - 响应时间：200ms ↓ 75%
  
  ---
  
  现在请分析代码，提供详细的性能优化建议。`;
  
      return {
        content: [
          {
            type: "text",
            text: message,
          },
        ],
      };
    } catch (error) {
      const errorMessage =
        error instanceof Error ? error.message : String(error);
      return {
        content: [
          {
            type: "text",
            text: `❌ 性能分析失败: ${errorMessage}`,
          },
        ],
        isError: true,
      };
    }
  }

• src/index.ts:268-281 (schema)

  The input schema definition for the 'perf' tool, specifying parameters 'code' (string) and 'type' (string with options).

  inputSchema: {
    type: "object",
    properties: {
      code: {
        type: "string",
        description: "需要性能分析的代码",
      },
      type: {
        type: "string",
        description: "分析类型：algorithm, memory, react, database, all（默认 all）",
      },
    },
    required: [],
  },

• src/index.ts:265-282 (registration)

  Registration of the 'perf' tool in the ListTools handler, including name, description, and input schema.

  {
    name: "perf",
    description: "【性能分析】分析代码性能瓶颈并提供优化建议",
    inputSchema: {
      type: "object",
      properties: {
        code: {
          type: "string",
          description: "需要性能分析的代码",
        },
        type: {
          type: "string",
          description: "分析类型：algorithm, memory, react, database, all（默认 all）",
        },
      },
      required: [],
    },
  },

• src/index.ts:498-500 (registration)

  Dispatch registration in the CallTool handler switch statement, calling the perf function.

  case "perf":
    return await perf(args);

• src/tools/index.ts:14-14 (registration)

  Export of the perf function from its module for use in the main index.

  export { perf } from "./perf.js";