performance-profiling

Performance Profiling

Find where your application actually spends time before touching a line of code. Covers the full stack: Node.js CPU and memory profiling, browser flame graphs, React render profiling, and database query analysis. The discipline here is profile first, optimize second — premature optimization is not a workflow, it is a guess.

When to Use

Use for:

• Diagnosing slow Node.js applications (CPU-bound, I/O-bound, memory pressure)
• Generating and reading flame graphs to find hot code paths
• Detecting memory leaks via heap snapshots and growth trends
• Profiling React component render performance with React Profiler
• Measuring browser rendering performance (Core Web Vitals, layout thrashing, long tasks)
• Database query profiling with EXPLAIN ANALYZE
• Measuring event loop utilization and latency

NOT for:

• Infrastructure monitoring, distributed tracing, or log aggregation (use logging-observability)
• Load testing and capacity planning (a separate domain)
• Network latency analysis between services (use distributed tracing tools)
• Database schema design optimization (separate from query profiling)

---

Core Decision: Where Is My App Slow?

flowchart TD
    Start[App is slow. Where?] --> Layer{Which layer?}
    Layer -->|Backend| Backend{What kind?}
    Layer -->|Frontend/browser| Browser{What symptom?}
    Layer -->|Unknown| Measure[Instrument first — add timing logs]

    Backend -->|CPU pegged, slow responses| CPU[CPU Profiling]
    Backend -->|Memory growing, crashes| Mem[Memory / Heap Profiling]
    Backend -->|Fast CPU, slow I/O| IO{I/O type?}
    IO -->|Database queries| DB[EXPLAIN ANALYZE + query profiler]
    IO -->|Network calls| Network[Trace external calls, add timeouts]
    IO -->|File system| FS[Check event loop utilization]

    Browser -->|Slow initial load| Lighthouse[Lighthouse + bundle analysis]
    Browser -->|Janky scrolling, animations| Rendering[Chrome Performance tab — layout thrashing]
    Browser -->|Slow after interaction| React{React app?}
    React -->|Yes| ReactProfiler[React Profiler + why-did-you-render]
    React -->|No| JS[Chrome Performance — long tasks, main thread blocking]

    CPU --> FlameGraph[Generate flame graph with 0x or clinic flame]
    Mem --> HeapSnap[Take heap snapshots before/after suspected leak]
    FS --> ELU[clinic bubbles — event loop utilization]