Web Platform · Cluster
Rendering Performance
Critical path, layout cost, and paint.
- 01 How a Frame Is Produced: Style, Layout, Paint, and Composite The stages a browser runs between a DOM change and a changed pixel, which stages each kind of change can skip, and where the frame budget is actually spent.
- 02 Render-Blocking CSS and Parser-Blocking Scripts on the Critical Path Why a stylesheet stops the first paint and why a script stops the parser, which dependencies the preload scanner can find on its own, and what defer and async actually order.
- 03 Layout Invalidation and Dirty Bits: Why Some Changes Reflow Everything How a style change propagates into layout, where a reflow can be stopped at a layout root, and which changes defeat containment entirely.
- 04 Forced Synchronous Layout and the Cost of Interleaving Reads with Writes Why calling getBoundingClientRect after a style write can trigger a full layout pass, how to recognise the pattern, and the restructuring that collapses N passes into one.
- 05 Compositing and Layer Promotion: When an Element Gets Its Own Layer The rules that put an element on its own compositor layer, the memory each layer costs, and why promoting more elements can make a page slower instead of smoother.
- 06 Painting, Tiles, and Raster Cost: What a Repaint Actually Recomputes Display lists, invalidation rectangles, and tile rasterization: which changes force re-recording, which force re-rastering, and why blur and text dominate the bill.
- 07 Frame Budgets, Long Tasks, and Where Input Latency Comes From How the main thread allocates work to a frame, why a 50 ms task delays the next interaction by more than 50 ms, and which scheduling primitives actually yield.
- 08 CSS Containment and content-visibility: Skipping Rendering Work What contain: size, layout, style, and paint each guarantee, how content-visibility skips work for offscreen subtrees, and the scroll and accessibility edge cases.
- 09 Scrolling and the Compositor Thread: Why Scroll Handlers Break Smoothness How compositor-driven scrolling works, why a non-passive wheel listener forces the main thread into the loop, and which scroll-linked effects stay off it.
- 10 Attributing Rendering Work: Reading Traces Without Guessing How to tell script time from style, layout, paint, and raster in a frame trace, which entry types expose the same information to code, and how to sample without fooling yourself.