DevTools Performance Analysis

macOS:  Cmd + Option + I  →  Performance tab
Windows: F12 or Ctrl + Shift + I  →  Performance tab

Keyboard shortcut to start recording:
  Cmd + Shift + E (macOS)
  Ctrl + Shift + E (Windows)

┌─────────────────────────────────────────────────────┐
│ FPS        ████████░░░░████████████░░░████████████  │
│           green = good (60fps), red = dropped frames│
├─────────────────────────────────────────────────────┤
│ CPU        ▓▓▓░░░▓▓▓▓▓▓▓▓░░░░▓▓▓▓▓▓░░░░░░░░░░░░░    │
│            yellow=JS  purple=layout  green=paint    │
├─────────────────────────────────────────────────────┤
│ NET        ──────  ────  ──────────  ───            │
│            blue bars = network requests             │
├─────────────────────────────────────────────────────┤
│ Screenshots [📸] [📸] [📸] [📸] [📸] [📸]             │
│            visual snapshots at each point in time   │
└─────────────────────────────────────────────────────┘

Main ─────────────────────────────────────────────────
│                                                     │
│  ┌──────────────────────┐  ┌────┐  ┌──────────────┐ │
│  │     Task (150ms)     │  │Task│  │  Task (80ms) │ │
│  │  ┌────────────────┐  │  │20ms│  │ ┌──────────┐ │ │
│  │  │  onClick()     │  │  └────┘  │ │ render() │ │ │
│  │  │ ┌────────────┐ │  │          │ └──────────┘ │ │
│  │  │ │ fetchData()│ │  │          └──────────────┘ │
│  │  │ └────────────┘ │  │                           │
│  │  └────────────────┘  │                           │
│  └──────────────────────┘                           │
│  ▲                                                  │
│  Red striped = Long Task (>50ms)                    │
└─────────────────────────────────────────────────────┘

Time ──────────────────────────────────────────►

┌─────────────────────────────────────────────┐
│              Task (200ms)                   │  ← Top-level task
│  ┌───────────────────────────────────────┐  │
│  │         handleClick() (180ms)         │  │  ← Event handler
│  │  ┌─────────────────┐ ┌────────────┐   │  │
│  │  │ processData()   │ │ updateDOM()│   │  │  ← Called functions
│  │  │    (120ms)      │ │   (50ms)   │   │  │
│  │  │ ┌─────────────┐ │ └────────────┘   │  │
│  │  │ │ sortArray() │ │                  │  │  ← Deeper call
│  │  │ │   (100ms)   │ │                  │  │
│  │  │ └─────────────┘ │                  │  │
│  │  └─────────────────┘                  │  │
│  └───────────────────────────────────────┘  │
└─────────────────────────────────────────────┘

How to read:
• Width = time spent (wider = slower)
• Depth = call stack (deeper = more nested calls)
• Color = category (yellow=JS, purple=layout, green=paint)
• Click any bar to see details in the Summary panel

Main Thread:
┌──────────────────────────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓    │  ← 200ms task (RED corner)
│ Long Task                            │
│  └── expensiveFunction() (180ms)     │  ← This is your bottleneck
└──────────────────────────────────────┘

What to do:
1. Click the long task to see which function is responsible
2. Look at the deepest/widest bar — that's where time is spent
3. Optimize that function or break it into smaller chunks

Main Thread (zoomed in):
┌────────┐┌──────┐┌────────┐┌──────┐┌────────┐
│  JS    ││Layout││  JS    ││Layout││  JS    │ ...
│(write) ││(calc)││(write) ││(calc)││(write) │
└────────┘└──────┘└────────┘└──────┘└────────┘
  ↑ This alternating pattern = layout thrashing
  Fix: batch reads, then batch writes

// dashboard.js — the code we're profiling
button.addEventListener("click", async () => {
  showSpinner();

  const data = await fetch("/api/dashboard").then(r => r.json());

  // ❌ Problem: processing 10,000 items synchronously
  const processed = data.items.map(item => {
    // Expensive computation per item
    return {
      ...item,
      score: calculateComplexScore(item),    // ~0.03ms each
      formatted: formatCurrency(item.value), // ~0.01ms each
    };
  });

  // ❌ Problem: reading layout in a loop
  processed.forEach(item => {
    const el = document.getElementById(item.id);
    const height = el.offsetHeight;           // Forces layout
    el.style.height = (height + 20) + "px";  // Invalidates layout
  });

  hideSpinner();
});

FPS:    ████████░░░░░░░░░░░░░░░░░░████████████████
        60fps    ← dropped frames →    60fps restored

CPU:    ░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░
                ← heavy JS + layout →

Main Thread:
┌──────────────────────────────────────────────────┐
│ Task (380ms) ⚠️ LONG TASK                        │
│ ┌──────────────────────────────────────────────┐ │
│ │ click handler                                │ │
│ │ ┌──────────┐ ┌──────────────────────────────┐│ │
│ │ │ fetch()  │ │ anonymous (processing)  280ms││ │
│ │ │  100ms   │ │ ┌────────────────────────┐   ││ │
│ │ │ (network)│ │ │ .map() loop    180ms   │   ││ │
│ │ └──────────┘ │ └────────────────────────┘   ││ │
│ │              │ ┌────────────────────────┐   ││ │
│ │              │ │ .forEach() + Layout    │   ││ │
│ │              │ │ thrashing      100ms   │   ││ │
│ │              │ └────────────────────────┘   ││ │
│ │              └──────────────────────────────┘│ │
│ └──────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────┘

Summary Panel:
  Scripting:  280ms (73%)
  Rendering:  100ms (26%)  ← layout thrashing!
  Painting:     4ms (1%)

button.addEventListener("click", async () => {
  showSpinner();

  const data = await fetch("/api/dashboard").then(r => r.json());

  // ✅ Fix 1: Process in chunks with setTimeout to yield
  const processed = [];
  for (let i = 0; i < data.items.length; i += 500) {
    const chunk = data.items.slice(i, i + 500);
    processed.push(...chunk.map(item => ({
      ...item,
      score: calculateComplexScore(item),
      formatted: formatCurrency(item.value),
    })));
    // Yield to event loop every 500 items
    if (i + 500 < data.items.length) {
      await new Promise(r => setTimeout(r, 0));
    }
  }

  // ✅ Fix 2: Batch reads, then batch writes (no thrashing)
  const heights = processed.map(item => {
    const el = document.getElementById(item.id);
    return el.offsetHeight;  // Batch all reads
  });
  processed.forEach((item, i) => {
    const el = document.getElementById(item.id);
    el.style.height = (heights[i] + 20) + "px";  // Batch all writes
  });

  hideSpinner();
});

Cmd + Shift + P     → Command palette (search any DevTools feature)
Cmd + Shift + E     → Start/stop Performance recording
Cmd + Shift + M     → Toggle device mode (responsive testing)
Cmd + Shift + C     → Inspect element mode

In Performance tab:
  W / S             → Zoom in / out on timeline
  A / D             → Pan left / right
  Click + drag      → Select a time range
  Ctrl + F          → Search for function names in flame chart