SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场performance-optimization

performance-optimization

编程与开发

查看项目

更新于 10-16 05:30

技能介绍

用途

Performance Optimization 是一个用于系统化识别和修复性能问题的技能。它适用于优化代码性能、减小包体积、改善加载时间或修复性能瓶颈等场景。其核心理念是“测量，不要猜测”——没有数据支撑的优化只是猜测。

核心原则

该技能强调一条根本规则：绝不在未测量的情况下进行优化。原因是过早优化会把时间浪费在非问题上，同时错过真正的问题。唯一例外是当存在明显的 O(n²) 算法且有 O(n) 替代方案时。

优化流程

该技能将优化过程分为六个步骤：

  1. 测量当前状态（基线）：在改动任何代码前建立指标。前端可使用 Chrome DevTools Performance 面板、Lighthouse 审计、npm run build && du -sh dist/ 查看包体积；后端可添加计时日志；数据库可使用 EXPLAIN ANALYZE 或检查日志中的查询耗时。需要采集的指标包括加载/响应时间、可交互时间、包体积、内存占用、查询时长、渲染时间等。

  2. 剖析以定位瓶颈：不要猜测问题所在，而是通过剖析工具定位。浏览器端使用 Chrome DevTools Performance 面板录制交互，查找超过 50ms 的长任务和布局抖动；服务端可添加详细计时（示例中给出了 Elixir 的 Profiler 模块）；React 可使用 React DevTools Profiler 查找不必要的重渲染、慢组件（超过 16ms）和过大的组件树。

  3. 识别根因：列出了前端、后端、数据库的常见性能问题。前端包括包体积过大、不必要的重渲染、阻塞式 JavaScript、未优化图片、过多网络请求、内存泄漏；后端包括 N+1 查询、缺少数据库索引、循环中的昂贵计算、同步外部 API 调用、过大的 JSON 响应、低效算法；数据库包括缺少索引、查询结构低效、过多 join、获取不必要列、无查询结果缓存。

  4. 应用针对性优化：一次只改一处，并测量每处改动的影响。技能给出了大量前后对比代码示例：

    • 包体积：按需导入 lodash 子模块或使用原生替代（如 [...new Set(array)] 替代 _.uniq）。
    • React 性能：使用 React.memo 避免不必要重渲染，使用 useCallback 保持函数引用稳定。
    • 代码分割：使用 React.lazy 与 Suspense 懒加载重型组件。
    • 图片优化：使用 WebP、srcSet 响应式图片和 loading="lazy"。
    • N+1 查询修复：使用 Repo.preload 将 N+1 次查询降为 2 次。
    • 数据库索引：为频繁查询列创建索引，将顺序扫描从 5000ms 降至索引扫描 2ms。
    • 缓存：使用 Cachex 缓存昂贵计算 5 分钟。
    • 批处理：批量获取替代逐个处理。
    • 算法优化：用 Set 单次遍历将 O(n²) 去重降为 O(n)。

  5. 测量影响（工作证明）：优化后必须重新测量，并以“优化前/改动/优化后/证据”的格式记录，例如加载时间从 3.2s 降至 1.8s（-44%）、包体积从 850KB 降至 520KB（-39%）。技能建议配合 proof-of-work 技能记录证据。

  6. 验证正确性：运行完整测试套件（如 npm test、mix test），并进行手动验证，确保功能仍正常、边界情况已处理、未引入新 bug。

检查清单

技能提供了三份检查清单：

  • 前端：包体积小于 200KB（gzip 后）、首次内容绘制小于 1.5s、可交互时间小于 3s、无布局偏移（CLS < 0.1）、图片优化、按路由代码分割、移除未使用代码、CSS 关键路径优化。
  • 后端：API 响应时间小于 200ms（p95）、数据库查询优化、无 N+1 查询、存在合适索引、昂贵操作缓存、慢任务放入后台作业、配置连接池、大数据集分页。
  • 数据库：频繁查询列有索引、审查查询执行计划、无全表扫描、合理使用 LIMIT、优化 join（小表优先）、统计信息保持最新（ANALYZE）。

优化模式与反模式

技能总结了懒加载、记忆化、数据库查询优化等模式，并列出反模式：优化错误的对象、过早优化、微优化、为性能破坏功能、无证据优化。

权衡与工具

技能提醒需要考虑性能与可读性、性能与可维护性之间的取舍，并始终记录所做的权衡。工具方面列出了前端包分析（npm run build -- --analyze、Lighthouse、webpack-bundle-analyzer）和后端数据库查询分析（EXPLAIN ANALYZE、Elixir 的 :eprof）。

与其他技能的集成

该技能建议与 proof-of-work（记录测量）、boy-scout-rule（优化时顺手改善）、simplicity-principles（更简单往往更快）、code-reviewer（验证优化质量）等技能配合使用。

限制

该技能本身是一套方法论与代码示例集合，未提供具体的安装命令或独立运行方式；其示例代码涉及 JavaScript/React、Elixir/Phoenix、PostgreSQL 等技术栈，其他技术栈需自行适配。技能中未提供收费、价格或平台相关信息。