Browser Architecture & Rendering Pipeline
Every frame your user sees passes through a six-stage pipeline. Critical rendering path, layout thrashing, GPU compositing, layer promotion, observer APIs, virtual scrolling with offset calculation trees, and the read/write batching patterns that keep you under the 16ms budget.
The complete pipeline from raw bytes to pixels on screen. Understand every stage the browser executes — byte decoding, tokenization, DOM/CSSOM construction, render tree assembly, layout, paint, and compositing — and how to surgically optimize the critical path.
Why CSS blocks rendering by default, how scripts interact with the parser, how fonts trigger invisible text, and the full toolkit for controlling resource loading — async CSS, defer, preload, prefetch, preconnect, and fetchpriority.
The read-write-read-write antipattern that silently tanks performance. Understand which DOM properties force synchronous layout, why the browser's batching optimization fails, and how to restructure code to avoid forced reflows.
60fps means 16.67ms per frame — and the browser needs some of that time. Understand what fits in a frame, how long tasks cause jank, how to measure frame drops, and modern techniques for yielding to the browser.
Why animating transform is 10x faster than animating left/top. Understand the browser's compositing architecture, main thread vs compositor thread, how GPU textures work, and which CSS properties skip the expensive pipeline stages.
How will-change promotes elements to GPU-composited layers, the real memory cost of each layer, when promotion helps and when it hurts, implicit layer triggers, and the layer explosion antipattern that silently destroys mobile performance.
How CSS contain isolates browser work to subtrees, how content-visibility: auto skips rendering for off-screen elements, and how containment turns O(n) layout into O(subtree) — with real performance measurements.
Modern APIs for observing element dimensions and visibility without polling or scroll listeners. Understand the observer pattern, entry objects, thresholds, rootMargin, performance characteristics, and how to avoid observation loops.
Why rendering 10K DOM nodes kills performance, how windowing solves it, building a fixed-height virtual list from scratch, the dynamic-height challenge, measuring and caching item heights, scroll position restoration, and overscan strategies.
The data structure problem hiding inside every dynamic-height virtual list. From O(n) naive summation to O(1) prefix sums to O(log n) Fenwick trees — with practical implementations for scroll offset management.
Where rAF fires in the event loop, the DOMHighResTimeStamp argument, the double-rAF trick for post-paint scheduling, rAF vs setTimeout for animations, cancellation, frame timing variability, and how React uses rAF internally.
Separating DOM reads from writes systematically — the fastdom pattern, rAF-based scheduling, how the virtual DOM abstracts batching, React's automatic batching, and measuring the performance difference with the Performance API.