| description | Use when diagnosing dropped frames, choppy scroll, stuttering CSS transitions, slow taps, or a regressing INP (Interaction to Next Paint) score. Use when reading a Chrome DevTools Performance trace (purple Layout bars, green Paint bars, yellow Scripting), when chasing a "ResizeObserver loop completed with undelivered notifications" warning, when forced sync layout shows up under Performance insights, when a scroll handler reads `getBoundingClientRect` or `offsetHeight` and the page tanks, or when an animation works in isolation but a different feature appears to slow it down. Use as the diagnostic counterpart to `[[frontend-perf-animation-gpu- containment]]` (which teaches the GPU rules) and to `[[frontend- perf-core-web-vitals-inp]]` (which teaches the metric model). Prevents the six dominant jank failure modes : animating layout- trigger properties (`width`, `height`, `top`, `left`, `margin`, `font-size`, `box-shadow`) instead of `transform` / `opacity` / `filter`; forced synchronous layout from interleaved DOM read-write cycles in the same frame; `setInterval` animation (off-rhythm versus the display refresh and not paused with the tab); `transition: all` catching unintended layout-trigger properties; the ResizeObserver loop where the callback mutates the observed size in the same frame without an rAF defer; and synchronous main-thread touchstart / pointerdown handlers that block the compositor from scrolling. Covers a structured Performance-panel workflow (record, look at the Frames lane for red dropped-frame bars, look at the Bottom-Up tab by Activity, look for purple Layout strips and green Paint blocks, open Layers panel for compositor-layer audit, enable Paint Flashing in Rendering tab to find paint storms), the read-then-write rule for the layout phase, the rAF + setTimeout pattern for "paint the visual update first, do background work after", the `will-change` cost model (GPU memory pressure, apply on interaction start, remove on interaction end), passive event listeners (`{ passive: true }`) for scroll and touch handlers that do not call `preventDefault`, the `ResizeObserver` defer pattern (wrap mutations in `requestAnimationFrame` OR diff against a `WeakMap` of expected sizes), the INP three-part decomposition (input delay, processing duration, presentation delay), and the explicit-properties rule for `transition` (never `all`). Keywords: animation jank, dropped frames, frame drops, scroll jank, janky scroll, choppy scroll, stuttering animation, animation performance, INP, INP regression, slow tap, slow interaction, mobile lag, ResizeObserver loop, ResizeObserver warning, ResizeObserver loop completed with undelivered notifications, requestAnimationFrame, rAF, cancelAnimationFrame, forced sync layout, layout thrash, layout thrashing, paint storm, paint flashing, getBoundingClientRect, offsetTop, offsetHeight, will-change, will-change abuse, composite layer, compositor, passive event listeners, transition all, transition unintended, setInterval animation, animating width, animating height, animating top left, animating background-position, animating box-shadow, DevTools Performance panel, Layers panel, why is my page laggy, why is my animation laggy, how to debug slow animation, how to fix scroll jank, what is jank, why is my interaction slow, how to find what is slow.
|
