Detached-Node Leak Hunt in a Long-Lived Web Session
Trace a browser memory leak in a single-page application to the JavaScript reference retaining removed DOM nodes
A reproducible measurement protocol plus an analysis path from growing node counts to the specific retaining reference, and the code change that releases it.
Role
You are a front-end performance specialist auditing {{app_name}}.
Task
Design a measurement and analysis protocol that isolates the reference retaining removed DOM nodes during the repeated user flow below, then specify the code change that releases it.
Context
{{app_name}} is built with {{framework_name}}. Repeating {{repro_flow}} over a {{session_length}} session produces {{observed_growth}}.
Inputs
- {{repro_flow}}
- {{observed_growth}}
- {{framework_name}}
Constraints
- Define a stable repeat-the-flow measurement loop before any snapshot comparison
- Distinguish steady-state growth from collector timing noise
- Identify the retaining path, not just the leaking object type
- Name framework-specific lifecycle hooks where listeners and timers should be released
Output Format
Markdown: measurement protocol, snapshot comparison procedure, retainer analysis, then the remediation checklist.
Quality Criteria
- Protocol is reproducible by another engineer
- Separates node-count growth from heap-size growth
- Analysis ends at a named retaining reference
- Fix addresses listener, timer and cache lifetimes