cpu-profiling
About
This CPU profiling skill helps developers identify performance bottlenecks by analyzing which functions consume the most CPU time. It enables targeted optimization of expensive code paths using browser profiling tools like Chrome DevTools and React Profiler. Use it when experiencing high CPU usage, slow execution, or performance regressions to improve application performance.
Documentation
CPU Profiling
Overview
CPU profiling identifies which functions consume most CPU time, enabling targeted optimization of expensive code paths.
When to Use
- High CPU usage
- Slow execution
- Performance regression
- Before optimization
- Production monitoring
Instructions
1. Profiling Tools
Browser Profiling:
Chrome DevTools:
Steps:
1. DevTools → Performance
2. Click record
3. Perform action
4. Stop recording
5. Analyze flame chart
Metrics:
- Function call duration
- Call frequency
- Total time vs self time
Firefox Profiler:
- Built-in performance profiler
- Flame graphs
- Timeline view
- Export and share
React Profiler:
- DevTools → Profiler
- Component render times
- Phase: render vs commit
- Why component re-rendered
---
Node.js Profiling:
node --prof app.js
node --prof-process isolate-*.log > profile.txt
Clinic.js:
clinic doctor -- node app.js
clinic flame -- node app.js
Shows: functions, memory, delays
V8 Inspector:
node --inspect app.js
Open chrome://inspect
Profiler tab
Take CPU profile
2. Analysis & Interpretation
// Understanding profiles
Flame Graph Reading:
- Wider = more time spent
- Taller = deeper call stack
- Hot path = wide tall bars
- Idle = gaps
Self Time vs Total Time:
- Self: time in function itself
- Total: self + children
- Example:
main() calls work() for 1s
work() itself = 0.5s (self)
work() itself + children = 1s (total)
Hot Spots Identification:
- Find widest bars (most time)
- Check if avoidable
- Check if optimizable
- Profile before/after changes
Example (V8 Analysis):
Function: dataProcessing
Self time: 500ms (50%)
Total time: 1000ms
Calls: 1000 times
Time per call: 0.5ms
Optimization: Reduce call frequency
3. Optimization Process
Steps:
1. Establish Baseline
- Profile current behavior
- Note hottest functions
- Record total time
- Check system resources
2. Identify Bottlenecks
- Find top 5 time consumers
- Analyze call frequency
- Understand what they do
- Check if necessary
3. Create Hypothesis
- Why is function slow?
- Can algorithm improve?
- Can we cache results?
- Can we parallelize?
4. Implement Changes
- Single change at a time
- Measure impact
- Profile after change
- Compare flame graphs
5. Verify Improvement
- Baseline: 1s
- After optimization: 500ms
- Confirmed 50% improvement
---
Common Optimizations:
Algorithm Improvement:
Before: O(n²) nested loop = 100ms for 1000 items
After: O(n log n) with sort+search = 10ms
Impact: 10x faster
Caching:
Before: Recalculate each call
After: Cache result, return instantly
Impact: 1000x faster for repeated calls
Memoization:
Before: fib(40) recalculates each branch
After: Cache computed values
Impact: Exponential to linear
Lazy Evaluation:
Before: Calculate all values upfront
After: Calculate only needed values
Impact: 90%+ reduction for partial results
Parallelization:
Before: Sequential processing, 1000ms
After: 4 cores, 250ms
Impact: 4x faster (8 cores = 8x)
4. Monitoring & Best Practices
Monitoring:
Production Profiling:
- Lightweight sampling profiler
- 1-5% overhead typical
- Tools: New Relic, DataDog, Clinic
- Alert on CPU spikes
Key Metrics:
- CPU usage % per function
- Call frequency
- Time per call
- GC pause times
- P95/P99 latency
---
Best Practices:
Before Optimizing:
[ ] Profile to find actual bottleneck
[ ] Don't guess (verify with data)
[ ] Establish baseline
[ ] Measure improvement
During Optimization:
[ ] Change one thing at a time
[ ] Profile after each change
[ ] Verify improvement
[ ] Don't prematurely optimize
Premature Optimization:
- Profile first
- Hot path only (80/20 rule)
- Measure impact
- Consider readability
---
Tools Summary:
Framework: Chrome DevTools, Firefox, Node Profiler
Analysis: Flame graphs, Call trees, Timeline
Monitoring: APM tools, Clinic.js
Comparison: Before/after profiles
---
Red Flags:
- Unexpected high CPU
- GC pauses >100ms
- Function called 1M times per request
- Deep call stacks
- Synchronous I/O in loops
- Repeated calculations
- Memory allocation in hot loop
Key Points
- Profile before optimizing (measure, not guess)
- Look for wide/tall bars in flame graphs
- Distinguish self time vs total time
- Optimize top bottlenecks first
- Verify improvements with measurement
- Consider caching and memoization
- Use production profiling for real issues
- Algorithm improvements beat micro-optimizations
- Measure before and after
- Focus on hot paths (80/20 rule)
Quick Install
/plugin add https://github.com/aj-geddes/useful-ai-prompts/tree/main/cpu-profilingCopy and paste this command in Claude Code to install this skill
GitHub 仓库
Related Skills
subagent-driven-development
DevelopmentThis skill executes implementation plans by dispatching a fresh subagent for each independent task, with code review between tasks. It enables fast iteration while maintaining quality gates through this review process. Use it when working on mostly independent tasks within the same session to ensure continuous progress with built-in quality checks.
algorithmic-art
MetaThis Claude Skill creates original algorithmic art using p5.js with seeded randomness and interactive parameters. It generates .md files for algorithmic philosophies, plus .html and .js files for interactive generative art implementations. Use it when developers need to create flow fields, particle systems, or other computational art while avoiding copyright issues.
executing-plans
DesignUse the executing-plans skill when you have a complete implementation plan to execute in controlled batches with review checkpoints. It loads and critically reviews the plan, then executes tasks in small batches (default 3 tasks) while reporting progress between each batch for architect review. This ensures systematic implementation with built-in quality control checkpoints.
cost-optimization
OtherThis Claude Skill helps developers optimize cloud costs through resource rightsizing, tagging strategies, and spending analysis. It provides a framework for reducing cloud expenses and implementing cost governance across AWS, Azure, and GCP. Use it when you need to analyze infrastructure costs, right-size resources, or meet budget constraints.
