3 min to read
How Web Browsers Work
Understanding the internal working mechanism of web browsers, from DNS lookup to page rendering.
🎯 Overview
Let’s explore how web browsers work internally, from the moment a user enters a URL until the page is displayed.
📝 Summary
- User accesses website through browser (www.a.com)
- Browser identifies server’s IP address through DNS
- Browser and server perform 3-Way Handshake
- Browser sends HTTP Request to server
- Server sends HTTP Response to browser
- Browser parses HTML to create DOM Tree
- Upon encountering Style tags, pauses DOM creation to parse CSS and create CSSOM Tree
- When encountering script tags, passes control to JavaScript engine to parse and create AST
- Creates Render Tree by combining DOM + CSSOM
- This process is called Construction
- Rendering engine performs Layout on Render Tree nodes
- UI backend draws UI by traversing Render Tree nodes (Painting)
- Finally, composes nodes in Render Tree in order (Composition)
- This process is called Operation
- Displays final result to web user
📊 Web Browser Working Process Flow Chart
graph TD;
A[🌐 User accesses website www.a.com] --> B[📡 DNS Lookup: Resolve IP address];
B --> C[🔗 3-Way Handshake SYN → SYN/ACK → ACK];
C --> D[📨 Send HTTP Request to Server];
D --> E[📥 Receive HTTP Response];
E --> F[🛠️ Parse HTML → Create DOM Tree];
F --> G{🎨 Style tag detected?};
G -- Yes --> H[🖌️ Parse CSS → Create CSSOM Tree];
H --> F;
G -- No --> I{📜 Script tag detected?};
I -- Yes --> J[⚙️ Parse JavaScript → Create AST];
J --> F;
I -- No --> K[📝 Merge DOM + CSSOM → Render Tree];
K --> L[📐 Layout: Position Elements];
L --> M[🖼️ Painting: Render UI];
M --> N[📊 Composition: Organize Layers z-index];
N --> O[👀 Display Rendered Page to User];
%% Additional Explanation
E -.-> P[⚡ Partial Rendering for Faster Display];
P --> F;
🔍 Detailed Process
🏗️ Construction Phase
- STEP 1: Browser - DNS
- User enters website URL (www.a.com)
- Browser queries DNS for host’s IP address
- DNS returns IP address (e.g., 1.1.1.1)
- STEP 2: Browser - Server
- Browser connects to server with IP address using random sequence number
- Performs 3-Way Handshake (SYN - SYN/ACK - ACK)
- Browser sends HTTP Request
- Server responds with HTTP Response
- STEP 3: Browser - Parsing
- Browser parses received data according to W3C specifications
- Rendering engine creates DOM Tree from HTML
- When encountering Style tags:
- Pauses DOM creation
- Parses CSS to create CSSOM Tree
- Resumes DOM creation
- When encountering Script tags:
- Pauses parsing
- Passes control to JS Engine
- Creates AST (Abstract Syntax Tree)
- Executes JavaScript code
- Creates Render Tree (DOM Tree + CSSOM Tree)
🎨 Operation Phase
- STEP 1: Layout
- Rendering engine positions Render Tree nodes correctly on screen
- STEP 2: Painting
- UI Backend draws UI by traversing Render Tree nodes
- STEP 3: Composition
- Arranges node layers in order (based on z-index)
- Lower z-index elements first, followed by higher ones
⚠️ Additional Notes
The parsing, layout, and UI drawing processes don’t wait for all data to be received from the server. For faster user experience:
- Browser starts displaying content as soon as partial data is received
- Continues this process as more data arrives
- This explains why web pages load progressively rather than all at once
🔑 Key Points
- CSS is a render-blocking resource, not a parsing-blocking resource
- JavaScript execution blocks parsing
- Progressive rendering improves perceived performance
Comments