[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-1c860f91-d11b-44ae-96af-c8a351812aac":3,"$fBsrz1yWl91D3XkB6YVEJVdSGinVw7yLdVS-ViDFCXHg":42},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":33},"1c860f91-d11b-44ae-96af-c8a351812aac","performance-optimizer","识别并修复代码、数据库和API中的性能瓶颈。测量前后以证明改进。","cat_coding_backend","mod_coding","sickn33,coding","---\nname: performance-optimizer\ndescription: \"Identifies and fixes performance bottlenecks in code, databases, and APIs. Measures before and after to prove improvements.\"\ncategory: development\nrisk: safe\nsource: community\ndate_added: \"2026-03-05\"\n---\n\n# Performance Optimizer\n\nFind and fix performance bottlenecks. Measure, optimize, verify. Make it fast.\n\n## When to Use This Skill\n\n- App is slow or laggy\n- User complains about performance\n- Page load times are high\n- API responses are slow\n- Database queries take too long\n- User mentions \"slow\", \"lag\", \"performance\", or \"optimize\"\n\n## The Optimization Process\n\n### 1. Measure First\n\nNever optimize without measuring:\n\n```javascript\n\u002F\u002F Measure execution time\nconsole.time('operation');\nawait slowOperation();\nconsole.timeEnd('operation'); \u002F\u002F operation: 2341ms\n```\n\n**What to measure:**\n- Page load time\n- API response time\n- Database query time\n- Function execution time\n- Memory usage\n- Network requests\n\n### 2. Find the Bottleneck\n\nUse profiling tools to find the slow parts:\n\n**Browser:**\n```\nDevTools → Performance tab → Record → Stop\nLook for long tasks (red bars)\n```\n\n**Node.js:**\n```bash\nnode --prof app.js\nnode --prof-process isolate-*.log > profile.txt\n```\n\n**Database:**\n```sql\nEXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@example.com';\n```\n\n### 3. Optimize\n\nFix the slowest thing first (biggest impact).\n\n## Common Optimizations\n\n### Database Queries\n\n**Problem: N+1 Queries**\n```javascript\n\u002F\u002F Bad: N+1 queries\nconst users = await db.users.find();\nfor (const user of users) {\n  user.posts = await db.posts.find({ userId: user.id }); \u002F\u002F N queries\n}\n\n\u002F\u002F Good: Single query with JOIN\nconst users = await db.users.find()\n  .populate('posts'); \u002F\u002F 1 query\n```\n\n**Problem: Missing Index**\n```sql\n-- Check slow query\nEXPLAIN SELECT * FROM users WHERE email = 'test@example.com';\n-- Shows: Seq Scan (bad)\n\n-- Add index\nCREATE INDEX idx_users_email ON users(email);\n\n-- Check again\nEXPLAIN SELECT * FROM users WHERE email = 'test@example.com';\n-- Shows: Index Scan (good)\n```\n\n**Problem: SELECT ***\n```javascript\n\u002F\u002F Bad: Fetches all columns\nconst users = await db.query('SELECT * FROM users');\n\n\u002F\u002F Good: Only needed columns\nconst users = await db.query('SELECT id, name, email FROM users');\n```\n\n**Problem: No Pagination**\n```javascript\n\u002F\u002F Bad: Returns all records\nconst users = await db.users.find();\n\n\u002F\u002F Good: Paginated\nconst users = await db.users.find()\n  .limit(20)\n  .skip((page - 1) * 20);\n```\n\n### API Performance\n\n**Problem: No Caching**\n```javascript\n\u002F\u002F Bad: Hits database every time\napp.get('\u002Fapi\u002Fstats', async (req, res) => {\n  const stats = await db.stats.calculate(); \u002F\u002F Slow\n  res.json(stats);\n});\n\n\u002F\u002F Good: Cache for 5 minutes\nconst cache = new Map();\napp.get('\u002Fapi\u002Fstats', async (req, res) => {\n  const cached = cache.get('stats');\n  if (cached && Date.now() - cached.time \u003C 300000) {\n    return res.json(cached.data);\n  }\n  \n  const stats = await db.stats.calculate();\n  cache.set('stats', { data: stats, time: Date.now() });\n  res.json(stats);\n});\n```\n\n**Problem: Sequential Operations**\n```javascript\n\u002F\u002F Bad: Sequential (slow)\nconst user = await getUser(id);\nconst posts = await getPosts(id);\nconst comments = await getComments(id);\n\u002F\u002F Total: 300ms + 200ms + 150ms = 650ms\n\n\u002F\u002F Good: Parallel (fast)\nconst [user, posts, comments] = await Promise.all([\n  getUser(id),\n  getPosts(id),\n  getComments(id)\n]);\n\u002F\u002F Total: max(300ms, 200ms, 150ms) = 300ms\n```\n\n**Problem: Large Payloads**\n```javascript\n\u002F\u002F Bad: Returns everything\nres.json(users); \u002F\u002F 5MB response\n\n\u002F\u002F Good: Only needed fields\nres.json(users.map(u => ({\n  id: u.id,\n  name: u.name,\n  email: u.email\n}))); \u002F\u002F 500KB response\n```\n\n### Frontend Performance\n\n**Problem: Unnecessary Re-renders**\n```javascript\n\u002F\u002F Bad: Re-renders on every parent update\nfunction UserList({ users }) {\n  return users.map(user => \u003CUserCard user={user} \u002F>);\n}\n\n\u002F\u002F Good: Memoized\nconst UserCard = React.memo(({ user }) => {\n  return \u003Cdiv>{user.name}\u003C\u002Fdiv>;\n});\n```\n\n**Problem: Large Bundle**\n```javascript\n\u002F\u002F Bad: Imports entire library\nimport _ from 'lodash'; \u002F\u002F 70KB\n\n\u002F\u002F Good: Import only what you need\nimport debounce from 'lodash\u002Fdebounce'; \u002F\u002F 2KB\n```\n\n**Problem: No Code Splitting**\n```javascript\n\u002F\u002F Bad: Everything in one bundle\nimport HeavyComponent from '.\u002FHeavyComponent';\n\n\u002F\u002F Good: Lazy load\nconst HeavyComponent = React.lazy(() => import('.\u002FHeavyComponent'));\n```\n\n**Problem: Unoptimized Images**\n```html\n\u003C!-- Bad: Large image -->\n\u003Cimg src=\"photo.jpg\" \u002F> \u003C!-- 5MB -->\n\n\u003C!-- Good: Optimized and responsive -->\n\u003Cimg \n  src=\"photo-small.webp\" \n  srcset=\"photo-small.webp 400w, photo-large.webp 800w\"\n  loading=\"lazy\"\n  width=\"400\"\n  height=\"300\"\n\u002F> \u003C!-- 50KB -->\n```\n\n### Algorithm Optimization\n\n**Problem: Inefficient Algorithm**\n```javascript\n\u002F\u002F Bad: O(n²) - nested loops\nfunction findDuplicates(arr) {\n  const duplicates = [];\n  for (let i = 0; i \u003C arr.length; i++) {\n    for (let j = i + 1; j \u003C arr.length; j++) {\n      if (arr[i] === arr[j]) duplicates.push(arr[i]);\n    }\n  }\n  return duplicates;\n}\n\n\u002F\u002F Good: O(n) - single pass with Set\nfunction findDuplicates(arr) {\n  const seen = new Set();\n  const duplicates = new Set();\n  for (const item of arr) {\n    if (seen.has(item)) duplicates.add(item);\n    seen.add(item);\n  }\n  return Array.from(duplicates);\n}\n```\n\n**Problem: Repeated Calculations**\n```javascript\n\u002F\u002F Bad: Calculates every time\nfunction getTotal(items) {\n  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n}\n\u002F\u002F Called 100 times in render\n\n\u002F\u002F Good: Memoized\nconst getTotal = useMemo(() => {\n  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n}, [items]);\n```\n\n### Memory Optimization\n\n**Problem: Memory Leak**\n```javascript\n\u002F\u002F Bad: Event listener not cleaned up\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll);\n  \u002F\u002F Memory leak!\n}, []);\n\n\u002F\u002F Good: Cleanup\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll);\n  return () => window.removeEventListener('scroll', handleScroll);\n}, []);\n```\n\n**Problem: Large Data in Memory**\n```javascript\n\u002F\u002F Bad: Loads entire file into memory\nconst data = fs.readFileSync('huge-file.txt'); \u002F\u002F 1GB\n\n\u002F\u002F Good: Stream it\nconst stream = fs.createReadStream('huge-file.txt');\nstream.on('data', chunk => process(chunk));\n```\n\n## Measuring Impact\n\nAlways measure before and after:\n\n```javascript\n\u002F\u002F Before optimization\nconsole.time('query');\nconst users = await db.users.find();\nconsole.timeEnd('query');\n\u002F\u002F query: 2341ms\n\n\u002F\u002F After optimization (added index)\nconsole.time('query');\nconst users = await db.users.find();\nconsole.timeEnd('query');\n\u002F\u002F query: 23ms\n\n\u002F\u002F Improvement: 100x faster!\n```\n\n## Performance Budgets\n\nSet targets:\n\n```\nPage Load: \u003C 2 seconds\nAPI Response: \u003C 200ms\nDatabase Query: \u003C 50ms\nBundle Size: \u003C 200KB\nTime to Interactive: \u003C 3 seconds\n```\n\n## Tools\n\n**Browser:**\n- Chrome DevTools Performance tab\n- Lighthouse (audit)\n- Network tab (waterfall)\n\n**Node.js:**\n- `node --prof` (profiling)\n- `clinic` (diagnostics)\n- `autocannon` (load testing)\n\n**Database:**\n- `EXPLAIN ANALYZE` (query plans)\n- Slow query log\n- Database profiler\n\n**Monitoring:**\n- New Relic\n- Datadog\n- Sentry Performance\n\n## Quick Wins\n\nEasy optimizations with big impact:\n\n1. **Add database indexes** on frequently queried columns\n2. **Enable gzip compression** on server\n3. **Add caching** for expensive operations\n4. **Lazy load** images and heavy components\n5. **Use CDN** for static assets\n6. **Minify and compress** JavaScript\u002FCSS\n7. **Remove unused dependencies**\n8. **Use pagination** instead of loading all data\n9. **Optimize images** (WebP, proper sizing)\n10. **Enable HTTP\u002F2** on server\n\n## Optimization Checklist\n\n- [ ] Measured current performance\n- [ ] Identified bottleneck\n- [ ] Applied optimization\n- [ ] Measured improvement\n- [ ] Verified functionality still works\n- [ ] No new bugs introduced\n- [ ] Documented the change\n\n## When NOT to Optimize\n\n- Premature optimization (optimize when it's actually slow)\n- Micro-optimizations (save 1ms when page takes 5 seconds)\n- Readable code is more important than tiny speed gains\n- If it's already fast enough\n\n## Key Principles\n\n- Measure before optimizing\n- Fix the biggest bottleneck first\n- Measure after to prove improvement\n- Don't sacrifice readability for tiny gains\n- Profile in production-like environment\n- Consider the 80\u002F20 rule (20% of code causes 80% of slowness)\n\n## Related Skills\n\n- `@database-design` - Query optimization\n- `@codebase-audit-pre-push` - Code review\n- `@bug-hunter` - Debugging\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,158,1354,"2026-05-16 13:33:40",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":25,"skillCount":32,"createdAt":26},"后端开发","backend","mdi-server","API、数据库、服务端架构",296,[34],{"id":35,"skillId":4,"version":36,"fileName":37,"fileSize":38,"filePath":39,"fileHash":40,"manifest":41,"createdAt":19},"c7a77a5b-1bea-4096-a3cc-1f9bab250120","1.0.0","performance-optimizer.zip",4070,"uploads\u002Fskills\u002F1c860f91-d11b-44ae-96af-c8a351812aac\u002Fperformance-optimizer.zip","91e3ec22d2a841968b69d2caff41152de69f9d3b4c142f5885ec4631747989db","[{\"path\":\"README.md\",\"isDirectory\":false,\"size\":465},{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":8841}]",{"code":43,"message":44,"data":45},200,"success",{"items":46,"stats":47,"page":50},[],{"averageRating":48,"totalRatings":48,"ratingCounts":49},0,[48,48,48,48,48],{"limit":51,"offset":48,"hasMore":52,"nextOffset":51,"ratedOnly":16},15,false]