Garbage Collection Deep Dive: Practical Debugging & Prevention

Question

Your web app shows increasing memory over time. Explain the GC (garbage collection) model (mark-and-sweep), common leak sources, how to diagnose with Chrome DevTools, and provide practical prevention steps.

---

Answer

Modern JavaScript engines use garbage collection—primarily mark-and-sweep—to reclaim memory. The engine identifies reachable objects starting from roots (global scope, stack frames) and marks them; unmarked objects are swept.

Common leak sources:

• Closures holding references to large objects
• Detached DOM nodes retained in variables or listeners
• Caches that never evict entries
• Timers and intervals not cleared
• Global singleton patterns that keep growing

Why this matters for SEO & UX:

• Memory leaks lead to degraded performance and jank (higher FID), which can harm search rankings and user engagement.

---

Diagnosis Steps (Chrome DevTools)

1. Open Performance or Memory tab.
2. Create a heap snapshot before action, perform the action (navigate, open modal), and take another snapshot.
3. Compare heap snapshots to find retained objects / detached DOM trees.
4. Use Allocation instrumentation to see allocation over time.
5. Use the Allocation profiler to find the code paths responsible.

---

Example Leak Pattern & Fix

Leak (closure + DOM):

function wire(el) {
  const largeData = new Array(1e6).fill('x');
  el.addEventListener('click', () => {
    console.log(largeData[0]); // closure keeps largeData alive
  });
}

Fix:

• Remove listener before DOM removal
• Limit closure scope or nullify largeData if no longer needed

function destroy(el, handler) {
  el.removeEventListener('click', handler);
  handler = null;
}

Use WeakMap for caches:

const cache = new WeakMap();
function getCached(obj) {
  if (!cache.has(obj)) cache.set(obj, expensive(obj));
  return cache.get(obj);
}

Prevention Checklist

• Remove event listeners on unmount
• Clear timers and intervals
• Avoid large globals — prefer local scopes
• Use WeakMap for metadata tied to DOM objects
• Profile routinely during development

Quick Practice

Open your app, perform a workflow, and take two heap snapshots. Identify the biggest retained object and trace where it’s referenced.

Summary

Memory leaks are avoidable with careful lifecycle and reference management. Learn the DevTools workflow and make leak detection part of your QA checklist.