profiling-performance

性能分析

当 Web 应用感觉缓慢、卡顿或无响应时，使用此技能。Cursor 内置浏览器提供 CPU 分析工具，可捕获真实的调用堆栈和计时数据。

工作原理

cursor-ide-browser MCP 提供 browser_profile_start 和 browser_profile_stop 工具，用于捕获 Chrome DevTools 格式的 CPU 分析数据。分析数据会以原始 JSON 和易读摘要两种形式写入 ~/.cursor/browser-logs/。

步骤

1. 确保应用正在运行 — 如果开发服务器尚未运行，请启动它。

2. 导航到缓慢的页面：

   Tool: browser_navigate
   Arguments: { "url": "http://localhost:3000/slow-page" }
   

3. 开始分析：

   Tool: browser_profile_start
   

4. 重现缓慢的交互 — 使用浏览器工具触发缓慢行为：

   • 点击按钮、滚动、在输入框中键入内容、在页面间导航
   • 使用 browser_click、browser_scroll、browser_fill 进行交互
   • 等待几秒，让交互完成

5. 停止分析：

   Tool: browser_profile_stop
   

   这会将两个文件写入 ~/.cursor/browser-logs/：

   • cpu-profile-{timestamp}.json — 原始 Chrome DevTools 分析数据
   • cpu-profile-{timestamp}-summary.md — 易读摘要

6. 分析结果 — 阅读这两个文件。原始 JSON 中值得关注的内容：

   • profile.nodes[].hitCount — 每个函数被采样的次数
   • profile.nodes[].callFrame.functionName — 函数名称
   • profile.samples.length — 收集到的样本总数

   对照摘要，找出：

   • 消耗 CPU 时间最多的函数
   • 意料之外的重新渲染或布局抖动
   • 开销较大的第三方库调用
   • 阻塞主线程的同步操作

7. 提出修复建议 — 根据分析数据，推荐具体的优化方案：

   • 对开销较大的计算进行记忆化
   • 对频繁触发的事件处理函数进行防抖
   • 将繁重的工作移至 Web Worker
   • 延迟加载组件或路由
   • 对长列表进行虚拟化

注意事项

• 始终阅读原始 .json 分析数据以核实摘要 — 摘要可能会遗漏细节。
• 首先在开发模式下进行分析，但请注意，React 开发模式会带来额外开销。要获得准确的测量结果，请分析生产构建。
• 较短的分析（2-5 秒的交互）通常比长时间分析更有用。
• 对比优化前后的分析结果，确认优化确实有效。