Detached DOM nodes
Slap yourself if
You think removing a node from the DOM automatically frees its memory.
Why this exists
Detached DOM nodes exist because DOM removal only breaks tree membership, not JavaScript reachability. As long as JS retains a reference, the browser must keep the node and everything it references alive.
Mental model
The DOM tree and the JS heap are two graphs linked together. Removing a node from the tree does nothing if the heap still points to it.
- A DOM node is removed from the document tree.
- JavaScript still holds a reference to that node or its children.
- The node becomes detached but remains reachable.
- The garbage collector correctly keeps it alive.
- Memory usage accumulates across navigations or renders.
- Caching DOM nodes in closures or module scope.
- Event listeners capturing DOM references indirectly.
- Framework abstractions hiding retained references.
- Assuming innerHTML replacement cleans everything up.
Detached DOM nodes are DOM elements removed from the document tree but still retained in memory because JavaScript references keep them reachable, preventing garbage collection.
- Detached nodes visible in heap snapshots
- DOM nodes stored in long-lived arrays or maps
- Cleanup relying solely on removeChild or unmount
- Memory growth after repeated view transitions
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.