Using Chrome DevTools for JS Performance Tuning

// Before recording, add performance marks in your code
// They appear as named markers in the timeline
 
performance.mark("data-fetch-start");
const data = await fetch("/api/data").then((r) => r.json());
performance.mark("data-fetch-end");
performance.measure("data-fetch", "data-fetch-start", "data-fetch-end");
 
performance.mark("render-start");
renderDashboard(data);
performance.mark("render-end");
performance.measure("render-dashboard", "render-start", "render-end");
 
// These marks and measures appear in the Performance panel timeline
// under the "Timings" row, making it easy to correlate with flame charts

// A flame chart shows call stacks over time
// Width = time spent, depth = call stack depth
 
// Example: this code would produce a wide bar for outerFunction
// and narrower nested bars for innerA and innerB
 
function outerFunction() {                    // Wide yellow bar
  const resultA = innerA();                   // Nested bar
  const resultB = innerB();                   // Adjacent nested bar
  return combineResults(resultA, resultB);    // Third nested bar
}
 
function innerA() {                           // Medium bar
  const data = [];
  for (let i = 0; i < 100000; i++) {         // Takes significant time
    data.push(Math.random());
  }
  return data;
}
 
function innerB() {                           // Narrow bar (fast)
  return Date.now();
}
 
// In the flame chart:
// - Yellow bars = JavaScript execution
// - Purple bars = Layout/Style recalculation
// - Green bars = Paint/Composite
// - Look for wide bars (long execution) as bottleneck candidates

// Long Tasks (>50ms) appear as red triangles in the Performance panel
// They block the main thread and delay user interactions
 
// Example of a Long Task
function processLargeDataset(items) {
  // This blocks the main thread for 200ms+ with 100k items
  return items
    .filter((item) => item.active)
    .map((item) => ({
      ...item,
      score: calculateScore(item),
      rank: getRank(item),
    }))
    .sort((a, b) => b.score - a.score);
}
 
// Fix: break into chunks using requestIdleCallback
function processLargeDatasetAsync(items) {
  return new Promise((resolve) => {
    const results = [];
    let index = 0;
 
    function processChunk(deadline) {
      while (index < items.length && deadline.timeRemaining() > 2) {
        const item = items[index];
        if (item.active) {
          results.push({
            ...item,
            score: calculateScore(item),
            rank: getRank(item),
          });
        }
        index++;
      }
 
      if (index < items.length) {
        requestIdleCallback(processChunk);
      } else {
        results.sort((a, b) => b.score - a.score);
        resolve(results);
      }
    }
 
    requestIdleCallback(processChunk);
  });
}

// Three-snapshot workflow for finding memory leaks:
// 1. Record initial heap state
// 2. Perform the suspect action (open modal, navigate, etc.)
// 3. Undo the action
// 4. Record second heap state
// 5. Compare snapshots 1 and 2
 
// In DevTools:
// Memory tab > Heap Snapshot > Take snapshot
// Select "Comparison" view between snapshots
// Sort by "Delta" to see what grew
 
// Filter by "Detached" to find detached DOM elements
// Click an object to see its retainer chain
 
// Programmatic support: add identifiable markers
class Modal {
  constructor(id) {
    this.id = id;
    this.element = document.createElement("div");
    this.element.className = "modal";
    this.element.setAttribute("data-debug-id", `modal-${id}`);
    // data-debug-id helps you find this in heap snapshots
  }
 
  open() {
    document.body.appendChild(this.element);
  }
 
  close() {
    this.element.remove();
    this.element = null; // Clear reference to prevent detached DOM leak
  }
}

// Allocation Timeline shows memory allocations over time
// Blue bars = allocations that are still alive
// Grey bars = allocations that were garbage collected
 
// DevTools: Memory tab > Allocation instrumentation on timeline > Start
 
// This helps identify:
// 1. Steady allocation growth (leak)
// 2. High allocation rate (GC pressure)
// 3. What functions are allocating the most
 
// Example: allocation-heavy code
function createWidgets(count) {
  const widgets = [];
 
  for (let i = 0; i < count; i++) {
    widgets.push({
      id: i,
      label: `Widget ${i}`,
      data: new Array(100).fill(0),  // Each widget allocates an array
      render: function () {           // Each widget has its own function
        return this.label;
      },
    });
  }
 
  return widgets;
}
 
// Optimized: shared function, lazy arrays
const sharedRender = function () { return this.label; };
 
function createWidgetsOptimized(count) {
  const widgets = new Array(count);
 
  for (let i = 0; i < count; i++) {
    widgets[i] = {
      id: i,
      label: `Widget ${i}`,
      data: null,          // Lazy allocation
      render: sharedRender, // Shared function reference
    };
  }
 
  return widgets;
}

// Network waterfall analysis for resource loading
 
// Key metrics to check:
// 1. Total page weight (transferred bytes)
// 2. Number of requests
// 3. Longest request (critical path)
// 4. Requests blocking rendering (render-blocking CSS/JS)
 
// Programmatic analysis
function analyzeNetworkPerformance() {
  const entries = performance.getEntriesByType("resource");
 
  const renderBlocking = entries.filter(
    (e) => e.renderBlockingStatus === "blocking"
  );
 
  const thirdParty = entries.filter((e) => {
    const url = new URL(e.name);
    return url.hostname !== window.location.hostname;
  });
 
  return {
    totalRequests: entries.length,
    totalTransferKB: (
      entries.reduce((sum, e) => sum + (e.transferSize || 0), 0) / 1024
    ).toFixed(1),
    renderBlocking: renderBlocking.map((e) => ({
      url: new URL(e.name).pathname,
      duration: `${e.duration.toFixed(0)}ms`,
    })),
    thirdPartyCount: thirdParty.length,
    thirdPartySizeKB: (
      thirdParty.reduce((sum, e) => sum + (e.transferSize || 0), 0) / 1024
    ).toFixed(1),
    slowestResources: entries
      .sort((a, b) => b.duration - a.duration)
      .slice(0, 5)
      .map((e) => ({
        url: new URL(e.name).pathname,
        duration: `${e.duration.toFixed(0)}ms`,
        size: `${((e.transferSize || 0) / 1024).toFixed(1)}KB`,
      })),
  };
}

// Layout thrashing: interleaving reads and writes forces synchronous layout
 
// BAD: read-write-read-write forces layout between each pair
function resizeCardsBad(cards) {
  cards.forEach((card) => {
    const height = card.offsetHeight;     // READ (forces layout)
    card.style.height = height * 2 + "px"; // WRITE (invalidates layout)
    // Next iteration: READ forces recalculation again
  });
}
 
// GOOD: batch reads, then batch writes
function resizeCardsGood(cards) {
  // Batch all reads
  const heights = cards.map((card) => card.offsetHeight);
 
  // Batch all writes
  cards.forEach((card, i) => {
    card.style.height = heights[i] * 2 + "px";
  });
}
 
// GOOD: use requestAnimationFrame for writes
function resizeCardsRAF(cards) {
  const heights = cards.map((card) => card.offsetHeight);
 
  requestAnimationFrame(() => {
    cards.forEach((card, i) => {
      card.style.height = heights[i] * 2 + "px";
    });
  });
}
 
// In DevTools:
// Performance panel > Enable "Layout Shift Regions"
// Rendering tab > Check "Layout Shift Regions" (highlights shifts in blue)
// Rendering tab > Check "Paint Flashing" (highlights repaints in green)

// Step-by-step workflow for performance analysis
 
const auditWorkflow = {
  step1_baseline: {
    action: "Record a Performance trace of the target interaction",
    metrics: ["Total time", "Main thread time", "Frame rate"],
    tool: "Performance panel > Record",
  },
 
  step2_longTasks: {
    action: "Identify Long Tasks (red triangles in timeline)",
    question: "Which functions cause the longest main thread occupation?",
    tool: "Main thread flame chart > sort by self time",
  },
 
  step3_memory: {
    action: "Take heap snapshots before and after the interaction",
    question: "Does memory return to baseline after the action is undone?",
    tool: "Memory panel > Heap snapshot > Comparison view",
  },
 
  step4_network: {
    action: "Check resource waterfall for blocking requests",
    question: "Are there unnecessary or slow requests delaying rendering?",
    tool: "Network panel > Waterfall column",
  },
 
  step5_rendering: {
    action: "Enable paint flashing and layout shift regions",
    question: "Are there unexpected repaints or layout shifts?",
    tool: "Rendering panel > Paint Flashing, Layout Shift Regions",
  },
 
  step6_fix: {
    action: "Address the top bottleneck identified above",
    techniques: [
      "Break long tasks into chunks (requestIdleCallback)",
      "Batch DOM reads/writes",
      "Defer non-critical resources",
      "Fix memory leaks (clear references)",
      "Use will-change for animated elements",
    ],
  },
 
  step7_verify: {
    action: "Re-record and compare metrics with baseline",
    goal: "Confirm improvement without regressions",
  },
};