Challenge 03 — Detached DOM nodes

Find why DOM nodes survive after removal from the document.

Mission

Nodes are removed from the document but kept in a JS array.

DevTools checklist

  1. Take snapshot (A)
  2. Click Start leaking — wait ~10 seconds
  3. Force GC → snapshot (B) → Comparison
  4. Filter or search for Detached in constructor list

Expected signals

  • Detached HTMLDivElement count rises
  • Detached Text or Detached Span may appear
  • Retainer chain: Array → detached node

Hints & solution

Hint

Elements are created, briefly attached, then removed from the DOM. Something in JavaScript still holds a reference to them.

Solution

Each tick creates a div, removes it from the sandbox, but pushes it into detachedNodes. The array keeps the subtree alive.

// Fix: clear the array when nodes are no longer needed
detachedNodes.length = 0;
// Or use WeakRef if you need non-owning references

← Lesson: Detached DOM · All challenges