Retained DOM Memory and Lifecycle Investigation

Working case

An inspection portal opens a photo detail panel and closes it 47 times. Each panel registers a resize observer, a key handler, and a temporary object URL for a private image. The DOM node leaves the page, yet a global array of callbacks still points to its closure; decoded images and listeners accumulate. The tab grows slower after each case. A heap snapshot shows detached panels retained by the callback array. The fix gives the panel one disposal function, removes the handler, disconnects the observer, revokes the object URL after the image no longer needs it, and removes the callback reference. The team repeats the same route cycle before and after the fix, allowing collection between snapshots.

Implementation boundary

function createDisposer() {
  const cleanupTasks = [];
  return { add(task) { cleanupTasks.push(task); }, dispose() { while (cleanupTasks.length) cleanupTasks.pop()(); } };
}
const panelLifetime = createDisposer();
panelLifetime.add(() => console.log("observer-disconnected"));
panelLifetime.dispose();
// Output: observer-disconnected

Define ownership when acquiring a resource. The code that registers a listener must know when to remove it; an observer needs disconnect; an interval needs cancellation; an object URL needs revocation after its consumer finishes; an asynchronous callback needs a stale-view guard or abort path. Do not revoke an image URL while the image still needs it, and do not assume removing a DOM node unregisters global handlers. In a component system, use its teardown lifecycle, but inspect the actual closures because a library hook cannot clean an unrelated global registry. Record one stable user path, take a baseline snapshot, repeat the path several times, request collection when profiling, and compare counts of retained panel objects and detached nodes. Inspect retaining paths before deleting a suspected cache: a bounded cache may be intentional while an unbounded closure array is not.

Cost and boundaries

Profiling can pause a page and distort timings, so use it for diagnosis rather than field telemetry. Cleanup adds lifecycle code and can create use-after-dispose bugs if requests finish late. Aborting work early may save memory and bandwidth but requires a distinct canceled result for the UI. A bounded cache trades memory for fewer network or decode operations; choose a cap and eviction rule based on measured reuse. Compare retained size after equivalent cycles, not total heap at unrelated moments. A plateau after warmup can be healthy. A steady slope in retained detached views after forced collection deserves investigation.

Failure trace

Open and close the photo panel 47 times, then compare snapshots and inspect the retaining path for any remaining detached panel. Keep DevTools console clear because inspected values can themselves remain reachable. Close a panel while its image request is in flight; the eventual callback must not append to a dead view. Close it before the image renders and verify the object URL is revoked at a safe point. Repeat after a route transition and a browser back action. Disable the cleanup once as a control; a test that cannot distinguish the known leak from the fixed behavior is not useful.

Verification

Equivalent route cycles are compared after warmup and collection.
Every acquired browser resource has one release owner.
Late asynchronous results cannot revive a disposed view.

Practice drill

Create a resource ledger for the photo panel: listener target, observer target, timer identifier, object URL, request controller, and callback registry. Write the acquisition and release event for each. Run a baseline, five warmup cycles, then 47 measured cycles. Count detached nodes and retained panel instances after comparable collection points. Trace one unexpected object back to a root and explain why that root exists. Add a late image response and a navigation-away case; the panel must stay disposed without breaking another active panel.

Decision note

Release resources at the owner boundary, and prove the retained graph stops growing across repeated cycles.

Common Mistakes

Calling every rising heap chart a leak.
Removing DOM nodes while leaving global callbacks alive.
Revoking an object URL before its consumer is finished.

Apply and check

Build Project: permit browser regression investigation and review Web Development: browser performance diagnosis quiz.