Browser Render & Paint Pipeline

Four things every engineer 'knows' about browser rendering, and what Chrome 154 actually does. will-change does not create a compositor layer: it records a compositing reason on a paint property node, and not even one-to-one — transform, perspective and transform-style all collapse into the same single reason. Whether a layer is allocated is the compositor's decision, taken later, from the paint artifact. Compositing is not 'no main thread' either: a composited scroll still runs main-thread work all the way through updating paint properties and intersection observation, because the compositor scroll type is an INPUT meaning the pixels have already moved and Blink must now catch up. Paint is not skipped when opacity falls below the 0.0004 visibility threshold — the layer paints, wrapped for the rest of that paint in a scope marking its chunks effectively invisible, and three declarations opt out of even that much, the most interesting being a running opacity animation, so that starting the animation does not jank. And the Style → Layout → Paint → Composite diagram is four boxes standing in for sixteen lifecycle states, with two entire phases hidden between 'layer' and 'paint', where most of what gets called paint cost is actually incurred. Meanwhile the cost that really scales is the one blamed least: DOM writes coalesce, because marking a container chain for layout stops at an ancestor that is already marked, so the thousandth write of a frame is nearly free — while every geometry read runs a whole-document lifecycle update as the first statement of its body, and handing the update a node does not narrow it to that node. Change the forced reflows, compositor layer count, animated properties, mutation rate, will-change hint and viewport resize, and watch the server-computed cascade across all five layers — style recalculation, layout, compositing inputs, paint and rasterization on the compositor — including the conjunctions where two settings that are each survivable alone are not survivable together. Validated against Chromium 154.0.8037.57 Blink and cc source (DocumentLifecycle::LifecycleState, Element::OffsetWidth, Document::UpdateStyleAndLayoutForNode, LayoutObject::MarkContainerChainForLayout, StyleEngine::MarkViewportUnitDirty, CompositingReasonFinder::DirectReasonsForPaintProperties, PaintLayerPainter::PaintedOutputInvisible, LayerTreeHost::SetNeedsRecalculateRasterScales, LayerTreeHostImpl::UpdateRasterCapabilities).

• ✓All current + future modules
• ✓Full kata library
• ✓Progress dashboard + weak area analysis

Cancel anytime. Billed annually.