profiling-guide

Profiling Guide

Measure before optimizing. Use profiling tools to identify actual bottlenecks instead of guessing. This guide covers profiling for JavaScript/Node.js, Python, and Go.

When to Use

• Application or endpoint is slow and you need to find the bottleneck
• Investigating memory leaks or growing memory usage
• Optimizing hot paths in CPU-intensive code
• Generating flame graphs for visual performance analysis
• Comparing performance before and after a change

Core Patterns

Chrome DevTools Profiling (Frontend)

Profile rendering, JavaScript execution, and memory in the browser.

## Performance Tab Workflow
1. Open DevTools (Cmd+Option+I / F12)
2. Go to Performance tab
3. Click Record, perform the slow action, click Stop
4. Analyze the flame chart:
   - Yellow = JavaScript execution
   - Purple = Rendering/layout
   - Green = Painting
   - Look for long tasks (>50ms, marked with red triangle)

## Key Metrics
- First Contentful Paint (FCP): < 1.8s
- Largest Contentful Paint (LCP): < 2.5s
- Total Blocking Time (TBT): < 200ms
- Cumulative Layout Shift (CLS): < 0.1

## Memory Tab Workflow
1. Go to Memory tab
2. Take Heap Snapshot
3. Perform suspected leaking action
4. Take another Heap Snapshot
5. Compare snapshots (select "Comparison" view)
6. Sort by "Delta" to find growing object counts

Programmatic performance measurement:

// Measure specific operations
performance.mark('fetch-start');
const data = await fetchLargeDataset();
performance.mark('fetch-end');
performance.measure('data-fetch', 'fetch-start', 'fetch-end');

const measure = performance.getEntriesByName('data-fetch')[0];
// measure.duration gives you milliseconds

// React component profiling
import { Profiler } from 'react';

function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
) {
  if (actualDuration > 16) { // Longer than one frame at 60fps
    console.warn(`Slow render: ${id} took ${actualDuration.toFixed(2)}ms`);
  }
}

<Profiler id="UserList" onRender={onRenderCallback}>
  <UserList users={users} />
</Profiler>