# How a Browser Works: A Beginner-Friendly Guide to Browser Internals

Ever wondered what *really* happens after you type [`www.google.com`](http://www.example.com) into your browser and hit **Enter**? It feels instant—but under the hood, your browser is doing a *lot* of clever work.

1. You Enter a URL
    
    You type a web address in the address bar.
    
    * **Protocol** → `https`
        
    * **Domain name** → [`www.google.com`](http://www.example.com)
        
    * **Path** → `/` (or something like `/blog`)
        
2. DNS Lookup
    
    Computers don’t understand domain names—they understand **IP addresses**.
    
    * Checks **cache** (have I visited before?)
        
    * Asks the **DNS server**
        
    * Gets an IP like `93.184.216.34`
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769760355026/16a8c8e0-2335-4d0f-8547-b7ebaf46ba15.jpeg align="center")
        
3. TCP + TLS Handshake
    
    * **TCP handshake** → “Can we talk?”
        
    * **TLS handshake (HTTPS)** → “Let’s talk *securely*.”
        
    
    This ensures:
    
    * Data isn’t stolen
        
    * Data isn’t modified
        
    * You’re talking to the real server
        
4. HTTP Request & Response
    
    The browser sends an **HTTP request**:
    
    The server replies with an **HTTP response**:
    
    * Status code (`200 OK`, `404 Not Found`)
        
    * Headers (metadata)
        
    * Body (HTML, CSS, JS, images)
        
5. Parsing HTML
    
    The browser starts reading the HTML **top to bottom**.
    
    It builds a structure called the **DOM (Document Object Model)**.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769760568838/d9076573-4be7-4890-bf16-853dd6cf51a1.png align="center")
    
6. Parsing CSS
    
    Next, CSS is processed to create the **CSSOM** (CSS Object Model).
    
    CSS answers questions like:
    
    * What color?
        
    * What size?
        
    * Where on the screen?
        
7. JavaScript Execution
    
    JavaScript is handled by the **JS engine**.
    
    It can:
    
    * Modify HTML (DOM)
        
    * Change styles (CSS)
        
    * Fetch new data
        
    * React to clicks, typing, scrolling
        
8. Paint & Composite
    
    Finally:
    
    * **Paint** → Fill pixels (text, colors, images)
        
    * **Composite** → Combine layers using the GPU