# Performance Hunter - 通用速度优化 ## 🎯 何时使用此技能遇到以下情况时使用： * 页面加载速度慢 * CPU/内存使用率高 * 用户界面响应缓慢 * 数据库超时 * API延迟问题 *“它曾经更快” ## ⚡ 速胜（80/20 规则） ### 5 大性能杀手（首先检查这些）： 1. **N+1 查询** \- 循环中的多个数据库调用 2. **缺少索引** \- 未索引的数据库查询 3. **大捆绑** \- 未优化的资产/依赖项 4. **内存泄漏** \- 未发布的参考文献 5. **阻塞 I/O** \- 同步操作 ## 🔍 第 1 步：测量（不要猜测！） ### 使用 MCP 工具： “分析[功能/端点/页面]的性能” “查找我的应用程序中的性能瓶颈” ### 没有 MCP： #### 快速测量： # 总体响应时间时间卷曲 http://localhost:3000/api/endpoint # 多个请求对于 {1..10} 中的 i；执行时间curl -s http://localhost:3000 > /dev/null;完成 # 数据库查询时间（临时添加到您的查询中） console.time('查询'); // 你的数据库查询 console.timeEnd('查询'); #### 浏览器性能（前端）： // 添加表现标记性能.mark('myFeature-start'); // ...你的代码... 性能.mark('myFeature-end'); 性能.measure('myFeature', 'myFeature-start', 'myFeature-end'); // 查看结果性能.getEntriesByType('测量'); ## 🎯 步骤 2：概况（查找瓶颈） ### 按语言进行通用分析： #### JavaScript/Node.js： # 内置分析器节点--检查app.js # 打开 chrome://inspect # 或者使用控制台计时 console.time('操作'); // 代码 console.timeEnd('操作'); ####Python：导入cProfile 导入 pstats cProfile.run('your_function()', 'profile_stats') 统计 = pstats.Stats('profile_stats') stats.sort_stats('累积').print_stats(10) #### Java： # 使用 JProfiler 或 VisualVM jstack # 线程转储 jmap -histo # 内存直方图 #### 去：导入_“net/http/pprof” // 访问http://localhost:6060/debug/pprof/ #### 数据库分析： -- PostgreSQL 解释分析选择...; --MySQL 设置分析 = 1；显示个人资料；显示查询 1 的配置文件； -- MongoDB db.collection.find().explain("executionStats") ## 🔧 步骤 3：优化（修复瓶颈） ### 1\.数据库优化 #### 使用 MCP（数据库架构设计器）： “优化我的数据库查询以提高性能” #### 没有 MCP： **N+1 查询修复：** // 不好：N+1 次查询 const 用户 = 等待 getUsers(); for (const user of users) { user.posts = 等待 getPostsByUserId(user.id); // N 个查询！ } // 好：带有连接的单个查询 const usersWithPosts = 等待 getUsersWithPosts(); // 1 个查询！ **添加索引：** -- 首先查找慢查询 -- PostgreSQL SELECT 查询、调用、mean_time FROM pg_stat_语句按平均时间 DESC 排序； -- 添加索引在用户（电子邮件）上创建索引 idx_users_email；在帖子上创建索引 idx_posts_user_created（user_id，created_at）； ### 2\.前端优化 **捆绑尺寸：** # 分析包 npm 运行构建 -- --stats webpack-bundle-analyzer stats.json # 常见修复： # - 延迟加载路由 # - Tree shake 未使用的代码 # - 对大型库使用 CDN **React/Vue 特定：** // 使用 React.memo/Vue.compulated const ExpenseComponent = React.memo(({ data }) => { // 仅当数据改变时重新渲染 }); // 虚拟化长列表从“react-window”导入{FixedSizeList}； ### 3\.后端优化 **缓存策略：** // 经常访问的数据的内存缓存 const 缓存 = new Map(); 异步函数 getExpectiveData(key) { if (cache.has(key)) { 返回缓存.get(key); } const data = 等待昂贵的操作（）；缓存.set（键，数据）； // TTL（生存时间） setTimeout(() => cache.delete(key), 60000); // 1 分钟返回数据； } **异步/并行处理：** // 不好：顺序 for (const item of items) { 等待进程项目（项目）； // 慢的！ } // 好：并行（有限制） const pLimit = require('p-limit'); 常量限制 = pLimit(5); // 最大并发数 5 等待 Promise.all(items.map(item => limit(() => processItem(item)))); ### 4\.内存优化 **查找内存泄漏：** // 节点.js if (全局.gc) { 全局GC(); 使用的 const = process.memoryUsage(); console.log('内存：', Math.round(used.heapUsed / 1024 / 1024), 'MB'); } // 常见的泄漏源： // - 事件侦听器未删除 // - 计时器未清除 // - 闭包中的大对象 // - 循环引用 **修复常见泄漏：** // 清理事件监听器组件将卸载() { window.removeEventListener('调整大小', this.handler); } // 清除定时器常量计时器 = setTimeout(...); // 稍后：清除超时（计时器）； // 对象引用的WeakMap const 缓存 = new WeakMap(); // GC 友好 ## 📊 性能监控 ### 快速监控设置： // 记录慢速操作函数监视器（fn，名称，阈值= 100）{ 返回异步（...args）=> { const start = Date.now(); const 结果 = 等待 fn(...args); const 持续时间 = Date.now() - 开始；如果（持续时间>阈值）{ console.warn(`⚠️ 操作缓慢：${name} 花费了 ${duration}ms`); } 返回结果； }; } // 用法 const fastQuery = 监视器(slowQuery, 'UserQuery', 50); ## 🚀 快速性能检查表 ### 前端： * 捆绑包大小 < 300KB（gzip 压缩） * 第一次内容绘制 < 1.8s * 交互时间 < 3.8 秒 * 无布局变化 (CLS < 0.1) * 图像优化（WebP、延迟加载） * 实现代码分割 * 用于缓存的 Service Worker ### 后端： * API 响应时间 < 200ms (p95) * 数据库查询 < 50ms * 配置连接池 * 实施速率限制 * 启用响应压缩 * 静态资源CDN缓存 * 繁重任务的后台作业 ### 数据库： * 所有查询都使用索引 * 没有N+1查询 * 连接池大小正确 * 为大量读取读取副本 * 大型数据集的分页 * 计划的真空/分析 (PostgreSQL) * 启用查询缓存（MySQL） ## 💡 特定语言的快速胜利 ### Node.js： // 多核使用集群 const cluster = require('cluster'); const numCPUs = require('os').cpus().length; if (cluster.isMaster) { for (让 i = 0; i < numCPUs; i++) { 集群.fork(); } } ###Python： # 使用内置加速器从 functools 导入 lru_cache @lru_cache(最大大小=128) def 昂贵的函数（参数）： # 第一次调用后缓存返回复杂计算（参数） ### Java： // 使用StringBuilder进行字符串连接 StringBuilder sb = new StringBuilder(); for (字符串 s : 字符串) { sb.append(s); // 比 + 运算符快得多 } ## 🎯 按类型划分的绩效目标 ### 网络应用程序： * 页面加载：< 3 秒 * API 调用：< 500ms * 搜索：< 200ms * 表单提交：< 1 秒 ### 移动应用程序： * 发射：< 2 秒 * 屏幕转换：< 300ms * 列表滚动：60 FPS * 网络重试：指数退避 ### API 服务： * p50 延迟：< 50ms * p95 延迟：< 200ms * p99 延迟：< 1 秒 * 错误率：<0.1% ## 📈 指标模板之前/之后 ## 性能优化报告 ### 公制 |之前 |之后 |改进 ------|---------|--------|------------- 页面加载| 4.2秒| 1.8秒| -57% API 响应 | 800 毫秒 | 180 毫秒 | -77% 内存使用情况| 512MB | 320MB | -37% 捆绑尺寸 | 1.2MB | 420KB | -65% ### 所做的更改： 1.新增数据库索引 2. 实现缓存层 3.启用gzip压缩 4. 延迟加载图像 5. 代码分割路由请记住：测量→配置文件→优化→验证！ 🚀

性能猎人

包含技能