Browser Rendering Pipeline
From HTML bytes to pixels on screen. The critical rendering path, layout, paint, compositing, and exactly what triggers expensive recalculations -- the mental model that unlocks performance intuition.
From raw bytes to pixels on screen. Understand the complete pipeline browsers execute on every page load — HTML parsing, CSSOM construction, render tree, layout, paint, and compositing — and why each stage matters for performance.
How browsers turn raw bytes into the DOM and CSSOM trees. Understand the byte → character → token → node → tree pipeline, speculative parsing, and why the CSSOM must complete before anything renders.
How the browser merges DOM and CSSOM into the render tree, excludes invisible elements, and calculates the exact geometry of every element on screen through the layout (reflow) process.
The hidden layout systems that control how elements flow and stack. Understand BFC, IFC, what creates new formatting contexts, stacking contexts, z-index resolution, and why your z-index: 9999 doesn't work.
How the browser turns layout geometry into pixels. Paint records, paint layers, the compositor thread, GPU textures, and the critical cost table — which CSS properties trigger layout vs paint vs composite only.
The most common cause of runtime jank. Understand why reading layout properties forces synchronous reflow, how the read-write-read-write antipattern destroys frame budgets, and how to batch DOM operations correctly.
Why scroll jank happens and how to eliminate it. Passive event listeners, the compositor thread bottleneck, Intersection Observer vs scroll events, and correct debounce/throttle patterns for scroll handlers.
How to tell the browser what NOT to compute. CSS contain limits the scope of layout, paint, and style recalculations. content-visibility: auto skips rendering off-screen elements entirely. Together they're the most underused performance tools in CSS.
Tell the browser what you need before it discovers it on its own. Understand preload, prefetch, preconnect, dns-prefetch, modulepreload, and fetchpriority — when each is correct and when each makes things worse.
The resources that dominate page weight. Modern image formats (AVIF, WebP), responsive images with srcset, next/image patterns, font-display strategies, CLS from images and fonts, and the loading techniques that actually matter.
Test your understanding of the browser rendering pipeline. Given a CSS property change, can you predict whether it triggers layout (reflow), paint only, or runs compositor-only? Each scenario includes a detailed explanation of WHY.