Chrome DevTools Performance Panel Guide

The Chrome DevTools Performance panel is the most powerful tool for diagnosing JavaScript performance issues, layout thrashing, long tasks, and Core Web Vitals regressions directly in your browser.

Recording a Performance Profile

• Open Chrome DevTools → Performance tab (F12 → Performance)
• Use Incognito mode to disable extensions and reduce noise
• Set CPU throttling: 4x slowdown for mid-range mobile, 6x for low-end
• Set Network throttling: Fast 3G for realistic conditions
• Load profile: Click the reload+record button (↺) to capture full navigation
• Interaction profile: Press Record → interact → Stop (3–5 seconds is enough)
• Check Screenshots to correlate visual changes with timeline events

Reading the Flame Chart

Diagnosing Long Tasks

// Mark custom tasks for DevTools visibility
performance.mark('process-start');
processLargeDataSet(data);
performance.mark('process-end');
performance.measure('Process Data', 'process-start', 'process-end');

// Break up long tasks with scheduler.yield()
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    // Yield every 50 items to avoid blocking
    if (i % 50 === 0) {
      await scheduler.yield();
      // Falls back to: await new Promise(r => setTimeout(r, 0))
    }
  }
}

Detecting Forced Reflow (Layout Thrashing)

// ❌ BAD: Read-write interleaving causes forced reflow
function badLoop(elements) {
  elements.forEach(el => {
    const width = el.offsetWidth;     // READ: forces layout
    el.style.width = width * 2 + 'px'; // WRITE: invalidates layout
    // Next read will force layout again!
  });
}

// ✅ GOOD: Batch reads, then writes
function goodLoop(elements) {
  // Phase 1: read all layout values
  const widths = elements.map(el => el.offsetWidth);
  // Phase 2: write all styles
  elements.forEach((el, i) => {
    el.style.width = widths[i] * 2 + 'px';
  });
}

// Layout-triggering properties to avoid in loops:
// offsetWidth, offsetHeight, offsetTop, offsetLeft
// scrollWidth, scrollHeight, scrollTop
// clientWidth, clientHeight, clientTop
// getBoundingClientRect(), getComputedStyle()

Bottom-Up & Call Tree Analysis

• Bottom-Up tab: Shows which functions took the most self-time (execution within the function itself). Best for finding the specific hot function.
• Call Tree tab: Shows the full call hierarchy from root to leaf. Best for understanding what triggered the expensive function.
• Event Log tab: Flat list of all events sorted by time. Filter by type (Script, Render, Paint).
• Click Group by URL in Bottom-Up to identify third-party scripts by domain.