profiling-performance（分析性能）

Performance Profile

Use this skill when a web application feels slow, janky, or unresponsive. Cursor's built-in browser has CPU profiling tools that capture real call stacks and timing data.

How It Works

The cursor-ide-browser MCP provides browser_profile_start and browser_profile_stop tools that capture Chrome DevTools-format CPU profiles. Profile data is written to ~/.cursor/browser-logs/ as both raw JSON and a human-readable summary.

Steps

1. Ensure the app is running — start the dev server if it isn't already running.
2. Navigate to the slow page: Tool: browser_navigate Arguments: {"url": "http://localhost:3000/slow-page"}
3. Start profiling: Tool: browser_profile_start
4. Reproduce the slow interaction — use browser tools to trigger the slow behavior:

- Click buttons, scroll, type in inputs, navigate between pages - Use browser_click, browser_scroll, browser_fill to interact - Wait a few seconds for the interaction to complete

1. Stop profiling: Tool: browser_profile_stop This writes two files to ~/.cursor/browser-logs/:

- cpu-profile-{timestamp}.json — raw Chrome DevTools profile - cpu-profile-{timestamp}-summary.md — human-readable summary

1. Analyze the results — read both files. Key things to look for in the raw JSON: Cross-reference with the summary to identify:

- profile.nodes[].hitCount — how many samples hit each function - profile.nodes[].callFrame.functionName — the function names - profile.samples.length — total number of samples collected - Functions consuming the most CPU time - Unexpected re-renders or layout thrashing - Expensive third-party library calls - Synchronous operations blocking the main thread

1. Suggest fixes — based on the profile data, recommend specific optimizations:

- Memoize expensive computations - Debounce rapid event handlers - Move heavy work to a Web Worker - Lazy-load components or routes - Virtualize long lists

Notes

• Always read the raw .json profile to verify the summary — the summary can miss nuances.
• Profile in development mode first, but be aware that React dev mode adds overhead. For accurate measurements, profile a production build.
• Short profiles (2-5 seconds of interaction) are usually more useful than long ones.
• Compare before/after profiles to verify your optimization actually helped.