My dashboardSign in

Performance and optimization · Hitting every frame

Rendering performance-style app

Illustrative system design for a hitting every frame app like Rendering performance: 3 topics to read, from requirements to deep dives.

Illustrative design, not Rendering performance’s actual implementation. Arrowbox is not affiliated with Rendering performance’s owner. Disclaimer

Start with Layout thrashing Sign in to start readingUpdated 2 Oct 2026

Core

  • Forced layout and layout thrashingIntermediate · 32 min read · Sign in to read

    Reading a geometry property after writing styles forces the browser to lay out immediately; doing it in a loop repeats layout per item, turning one layout into hundreds.

  • Animating on the compositorIntermediate · 33 min read · Sign in to read

    When an animation must follow a layout change, change the layout once, then animate the visual difference with transform on the compositor: the FLIP technique, and the reduced-motion version every such animation needs.

  • Rendering less: containment and content-visibilityAdvanced · 37 min read · Sign in to read

    CSS containment tells the browser a subtree's layout and paint cannot leak out, and content-visibility: auto skips rendering off-screen sections entirely, which shrinks the work of every frame on large DOMs.