Runtime Performance

Release everything setup registered on something longer-lived than the view: listeners on window or document, timers, observers, store and socket subscriptions, in-flight requests, and entries pushed into module-level collections. A multi-page site gets a clean heap on every navigation; an SPA never does.

That sawtooth is layout thrashing: the code measures geometry and mutates the DOM in the same loop, so each iteration forces the browser to redo layout. To locate it, open the detail pane on one of those layout entries — DevTools flags a forced layout and links to the JavaScript that triggered it.

A long task is one uninterrupted unit of main-thread work lasting over 50 ms. The 50 ms comes from the roughly 100 ms budget for responding to input: it leaves half that budget free. While a long task runs, input, timers and frames all wait.

Yield right after the DOM update that shows feedback and before the expensive recalculation. The interaction is timed until the next paint, so painting the feedback first closes the measured window while the heavy work runs after it.

Stop measuring on scroll. Use IntersectionObserver for on-screen decisions and ResizeObserver for size-dependent ones: the browser reports the geometry it already computed and calls you only when something crosses a threshold, so scroll frames where nothing changed cost nothing. A sticky sidebar usually needs no JavaScript at all.

Chrome prints that when your JavaScript asked the browser for a geometry value and forced it to compute layout on the spot, costing 47ms inside that script. It is a symptom, not a location: record a performance trace of the same interaction to find the call site.

Show the "Saved" state first, then defer the localStorage write and the analytics payload until after the browser has painted. Only the feedback has to be in that frame; the bookkeeping is what the user is currently waiting behind.

Default to declarative CSS for state-driven motion with known start and end values. Reach for Element.animate() when values are computed at runtime or you need playback control such as pause, reverse or a finished promise. Use a per-frame JavaScript loop only for motion that cannot be expressed as interpolation between keyframes.

Reduce large or unexpected movement — parallax, zooms, sliding transitions, autoplaying loops — while keeping the feedback that tells users what changed, usually as an opacity crossfade. Honour it in CSS with a prefers-reduced-motion media query and in JavaScript by checking the same query through matchMedia.

Total Blocking Time sums, over every long task in the measured load window, the amount by which that task exceeds 50 ms. One 900 ms task contributes 850 ms; six 120 ms tasks contribute 70 ms each, or 420 ms. Anything at or under 50 ms contributes nothing.

A detached DOM tree is a group of nodes removed from the document but still referenced from JavaScript, so the browser cannot free them. Because every node references its parent and every parent its children, holding one node keeps its entire former tree in memory.

A Map holds its keys strongly, so every row element ever rendered stays reachable through the module-level Map and its whole table with it. A WeakMap holds keys weakly and does fix this case, but only for object keys and only if nothing else still references the element.

Report the percentage of frames dropped during the animation, plus the duration of the worst frame — not average frames per second. Measure it by recording a performance trace on a slow reference device or with CPU throttling while performing the interaction, and read the frames the browser could not present on time.

FLIP stands for First, Last, Invert, Play: measure the element's starting box, apply the final layout and measure again, apply a transform that visually puts it back at the start, then animate that transform away. The layout change happens once, up front, and only a transform is interpolated during the animation.

That gap between visible and usable is the classic hydration cost: the server HTML paints, then one long task compiles and evaluates the bundle and attaches behaviour to the existing markup, blocking input until it finishes. The fixes shrink or split that work; making the download faster does not help.

Reduce it to a repeatable round trip, then take heap snapshots after equal numbers of cycles and compare them. A leak grows by a similar amount every cycle and never plateaus; a cache rises and levels off. The retainers path of a growing object names the reference to cut.

Usually the deferred work did not disappear — it now runs while the user's next input arrives and shows up as input delay on the following interaction. Check the interaction's phase breakdown before concluding the split failed.

Offloading pays off only when the work is pure computation and the data is cheap to move. Copying large objects across the boundary is itself main-thread work at both ends and can erase the win. Measure the real tasks, prototype the hot path, and price the complexity before committing.

FastDOM keeps two queues — reads and writes — and flushes them in a single animation frame with every read before every write, so a frame contains one layout instead of many. It only works if all DOM access in that frame goes through it; one unbatched reader elsewhere re-splits the frame.

A longtask entry gives duration, start time and a frame-level attribution — never the script or function responsible. The Long Animation Frames API reports whole slow frames instead of single tasks, with a per-script breakdown including source URL and function name, which is what makes field attribution usable.

It turns blind time-slicing into an interrupt check: the job keeps the thread while nobody is waiting and releases it the instant input queues. Risks are that it is Chromium-only, blind to rendering and timers, and excludes continuous events by default.

Decide on evidence: measure the growth rate per hour against the device's headroom, and check who else runs this code. A scheduled reload is a legitimate control for a kiosk with slow, bounded growth; it is a cover-up when ordinary user sessions hit the same ceiling.