古法编程

让 AI 自动定位并修复代码性能瓶颈

解决应用变慢问题：AI 帮你分析页面加载、API 响应、数据库查询等慢速环节，提供具体的优化方案和测量数据，证明性能提升效果。

为什么需要这个技能

当用户反馈应用卡顿、页面加载慢或 API 响应超时，单纯猜测很难快速定位原因。应用变慢往往源于无用的循环查询、缺失的数据库索引、未缓存的大数据请求或前端组件重复渲染。

这个技能让 AI 充当性能专家，自动识别这些隐蔽的瓶颈点，生成具体的代码修改建议，并指导你通过测量来验证优化成果，确保每次改进都是有效的。

适用场景

  • 用户投诉：“这个页面打开太慢了"或"APP 经常卡死”。
  • 监控发现：数据库查询执行时间超过 500ms，或 API 响应时间变长。
  • 开发测试：发现循环中重复执行 N+1 查询，或使用了全量 SELECT * 导致内存溢出。
  • 预算设定：需要确保页面加载在 2 秒内，或 Bundle 体积控制在 200KB。

核心工作流

  1. 测量现状：首先使用 console.time、DevTools 性能面板或数据库分析命令（EXPLAIN ANALYZE）获取基准数据。
  2. 定位瓶颈：AI 分析测量结果，判断是网络请求、计算逻辑还是渲染问题。
  3. 应用修复：生成具体代码（如添加索引、启用缓存、使用 Promise.all 并行请求、组件懒加载）。
  4. 验证效果：再次测量，对比优化前后的时间差，确认提升倍数。

常见优化案例

数据库查询优化

问题：N+1 查询

// Bad: N+1 queries
const users = await db.users.find();
for (const user of users) {
  user.posts = await db.posts.find({ userId: user.id }); // N queries
}

// Good: Single query with JOIN
const users = await db.users.find()
  .populate('posts'); // 1 query

问题：缺失索引

-- Check slow query
EXPLAIN SELECT * FROM users WHERE email = 'test@example.com';
-- Shows: Seq Scan (bad)

-- Add index
CREATE INDEX idx_users_email ON users(email);

-- Check again
EXPLAIN SELECT * FROM users WHERE email = 'test@example.com';
-- Shows: Index Scan (good)

API 性能提升

问题：无缓存

// Bad: Hits database every time
app.get('/api/stats', async (req, res) => {
  const stats = await db.stats.calculate(); // Slow
  res.json(stats);
});

// Good: Cache for 5 minutes
const cache = new Map();
app.get('/api/stats', async (req, res) => {
  const cached = cache.get('stats');
  if (cached && Date.now() - cached.time < 300000) {
    return res.json(cached.data);
  }
  
  const stats = await db.stats.calculate();
  cache.set('stats', { data: stats, time: Date.now() });
  res.json(stats);
});

问题：串行执行

// Bad: Sequential (slow)
const user = await getUser(id);
const posts = await getPosts(id);
const comments = await getComments(id);
// Total: 300ms + 200ms + 150ms = 650ms

// Good: Parallel (fast)
const [user, posts, comments] = await Promise.all([
  getUser(id),
  getPosts(id),
  getComments(id)
]);
// Total: max(300ms, 200ms, 150ms) = 300ms

前端与内存优化

问题：不必要的重新渲染

// Bad: Re-renders on every parent update
function UserList({ users }) {
  return users.map(user => <UserCard user={user} />);
}

// Good: Memoized
const UserCard = React.memo(({ user }) => {
  return <div>{user.name}</div>;
});

问题：内存泄漏

// Bad: Event listener not cleaned up
useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  // Memory leak!
}, []);

// Good: Cleanup
useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

测量与预算

优化前后务必对比数据：

// Before optimization
console.time('query');
const users = await db.users.find();
console.timeEnd('query');
// query: 2341ms

// After optimization (added index)
console.time('query');
const users = await db.users.find();
console.timeEnd('query');
// query: 23ms

// Improvement: 100x faster!

性能预算目标：

  • 页面加载：< 2 秒
  • API 响应：< 200ms
  • 数据库查询：< 50ms
  • Bundle 大小：< 200KB

下载和安装

下载 performance-optimizer 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。

你可能还需要

暂无推荐