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

// 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

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)

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