🌐 Browser Rendering: How Browsers Display Web Pages
Category: general
Difficulty: hard
Here's the full detailed flow of how a browser renders a webpage, from receiving HTML to displaying pixels. This includes networking, parsing, DOM/CSSOM construction, layout, painting, and compositing. 📚 Want Deep Dive Details? See Critical Rendering Path for comprehensive coverage of CRP, optimization strategies, and performance metrics. 💡 Understanding Render-Blocking Render-blocking means the browser pauses page rendering and waits for a resource to be downloaded and processed before continuing. This delays when users see content on their screen. Key Render-Blocking Resources: CSS (<link rel="stylesheet">) - Blocks rendering until parsed JavaScript (default <script>) - Blocks HTML parsing AND rendering Fonts (some scenarios) - Can delay text rendering Images - Generally don't block rendering (lazy load by default) Impact: Every render-blocking resource adds time to First Contentful Paint (FCP) and Largest Contentful Paint (LCP). 🧠 Full Webpage Rendering Flow Browser Requests Page DNS Lookup: Translates domain to IP. TCP Connection: Handshake with server. HTTP Request: Browser sends GET / for HTML. Server Responds with HTML Browser starts receiving HTML as a stream (not all at once). Parsing begins immediately as data arrives. HTML Parsing -> DOM Tree HTML is parsed token by token by the HTML parser . Browser builds the DOM tree : <html> -> <head> + <body> -> nested elements Each tag becomes a node . Render-blocking factor: HTML parsing does NOT block rendering by itself unless a render-blocking resource is encountered (CSS or JS). CSS Parsing -> CSSOM Tree ⚠️ RENDER-BLOCKING <link rel="stylesheet"> or <style> tags trigger CSS download and parsing. Builds a CSSOM (CSS Object Model) representing styles. Why CSS blocks rendering: Browser needs all styles before creating render tree Without styles, content would render unstyled, then flash with styles (FOUC - Flash of Unstyled Content) Blocks rendering until CSSOM is complete...