How Web Browsers Work: From URL Request to Screen Pixels
Every time you open a web page, your browser executes a complex multi-step pipeline—translating raw byte streams received across the internet into interactive visual pixels on your screen.
💡 Plain-English Analogy
A browser is like an architect reading blueprints. It downloads the raw text files (HTML, CSS, JavaScript). First it builds the skeleton of the house (the DOM), then applies the paint and styling (the CSSOM), calculates exact room dimensions on your device screen (Layout), and finally colors the pixels (Painting).
⚙️ Architecture & Under the Hood
The critical rendering path consists of five distinct phases: HTML tokenization into the DOM, CSS parsing into the CSSOM, unification into the Render Tree, geometric Layout (reflow), and Painting into composited raster layers uploaded to the GPU.
The 5 Phases of the Critical Rendering Path
Understanding these phases is essential for diagnosing frontend performance bottlenecks and optimizing Google Core Web Vitals.
- 1. DOM Construction: HTML bytes are decoded into characters, tokenized, and structured into a parent-child tree of nodes.
- 2. CSSOM Construction: Stylesheet rules are processed into a cascaded style tree.
- 3. Render Tree: The DOM and CSSOM are combined, excluding invisible elements like <head> or display: none.
- 4. Layout (Reflow): The browser computes the exact geometric dimensions and coordinates of each visible box.
- 5. Painting & Compositing: Visual elements (text, colors, borders, shadows) are rasterized into layers and sent to the GPU.
HTML Bytes ──▶ Tokens ──▶ Nodes ──▶ DOM Tree ──┐
├──▶ Render Tree ──▶ Layout ──▶ Paint ──▶ Composite
CSS Bytes ──▶ Tokens ──▶ Nodes ──▶ CSSOM Tree ──┘Frequently Asked Questions
Why does JavaScript block HTML parsing by default?
When the HTML parser encounters a <script> tag without async or defer, it must pause parsing, download the script, and execute it because the script could theoretically call document.write() and modify the DOM.