what happens when you type in a URL in browser

The Journey of a URL: What Happens When You Type an Address in Your Browser

Unravel the complex sequence of events that unfold from the moment you hit Enter after typing a URL to the full display of a web page in your browser.

Every day, millions of users type URLs into their web browsers, expecting instant access to information. But what truly happens behind the scenes in those few seconds between pressing 'Enter' and seeing a fully rendered webpage? This article breaks down the intricate process, from DNS resolution and TCP handshakes to HTTP requests and browser rendering, providing a comprehensive understanding of web communication.

Phase 1: DNS Resolution - Finding the Server

The first critical step is translating the human-readable domain name (like www.example.com) into a machine-readable IP address (like 192.0.2.1). This process is handled by the Domain Name System (DNS), often described as the internet's phonebook. Your browser doesn't know the IP address directly, so it initiates a DNS lookup.

sequenceDiagram
    participant User
    participant Browser
    participant OS
    participant LocalDNS
    participant RootDNS
    participant TLDDNS
    participant AuthoritativeDNS

    User->>Browser: Types URL (e.g., example.com)
    Browser->>OS: Check DNS cache
    alt Cache Hit
        OS-->>Browser: Returns IP address
    else Cache Miss
        OS->>LocalDNS: DNS query for example.com
        LocalDNS->>RootDNS: Query for example.com
        RootDNS-->>LocalDNS: Returns IP of .com TLD DNS
        LocalDNS->>TLDDNS: Query for example.com
        TLDDNS-->>LocalDNS: Returns IP of example.com Authoritative DNS
        LocalDNS->>AuthoritativeDNS: Query for example.com
        AuthoritativeDNS-->>LocalDNS: Returns IP address (e.g., 192.0.2.1)
        LocalDNS-->>OS: Returns IP address
        OS-->>Browser: Returns IP address
    end

Sequence diagram of the DNS resolution process.

The browser first checks its own DNS cache. If not found, it asks the operating system (OS), which also has a cache. If still not found, the OS queries a local DNS resolver (usually provided by your ISP). This resolver then performs a recursive query, starting with the root DNS servers, moving to Top-Level Domain (TLD) servers (like .com, .org), and finally to the authoritative DNS server for the specific domain, which holds the actual IP address. Once the IP is retrieved, it's cached at various levels for faster future access.

Phase 2: Establishing Connection - TCP Handshake and HTTP Request

With the IP address in hand, the browser can now initiate a connection to the web server. This typically involves the Transmission Control Protocol (TCP) to ensure reliable data transfer. After the TCP connection is established, the browser sends an HTTP (or HTTPS) request to the server.

sequenceDiagram
    participant Browser
    participant WebServer

    Browser->>WebServer: SYN (Synchronize Sequence Number)
    WebServer->>Browser: SYN-ACK (Synchronize-Acknowledge)
    Browser->>WebServer: ACK (Acknowledge)
    Note over Browser,WebServer: TCP 3-way Handshake Complete

    Browser->>WebServer: HTTP GET /index.html (or other resource)
    WebServer->>Browser: HTTP 200 OK (with HTML content)
    Note over Browser,WebServer: Data Transfer Begins

TCP 3-way handshake followed by an HTTP GET request.

The TCP 3-way handshake ensures that both the client (browser) and server are ready to communicate. Once the connection is open, the browser sends an HTTP GET request, asking for the content at the specified URL. This request includes headers with information like the user agent, accepted languages, and cookies. If the URL uses HTTPS, an additional TLS/SSL handshake occurs before the HTTP request to establish a secure, encrypted connection.

Phase 3: Server Processing and Browser Rendering

Upon receiving the HTTP request, the web server processes it. This might involve fetching static files, running server-side scripts (like PHP, Python, Node.js), querying databases, or interacting with other services. The server then generates an HTTP response, typically containing the requested HTML, CSS, JavaScript, images, and other assets, along with an HTTP status code (e.g., 200 OK, 404 Not Found).

flowchart TD
    A[Server Receives Request] --> B{Process Request}
    B --> C{Fetch Data/Run Scripts}
    C --> D[Generate HTTP Response]
    D --> E[Browser Receives Response]
    E --> F[Parse HTML]
    F --> G[Build DOM Tree]
    G --> H[Parse CSS]
    H --> I[Build CSSOM Tree]
    I --> J[Combine DOM + CSSOM]
    J --> K[Create Render Tree]
    K --> L[Layout (Position Elements)]
    L --> M[Paint (Render Pixels)]
    M --> N[Composite Layers]
    N --> O[Display Page]

Flowchart illustrating server processing and browser rendering stages.

The browser receives the response and begins the rendering process:

1. Parsing HTML: The browser parses the HTML to construct the Document Object Model (DOM) tree.
2. Parsing CSS: It parses CSS to build the CSS Object Model (CSSOM) tree.
3. Render Tree Construction: The DOM and CSSOM trees are combined to form the render tree, which contains only the visible elements and their computed styles.
4. Layout (Reflow): The browser calculates the exact position and size of each object in the render tree.
5. Painting (Repaint): The browser then draws the pixels for each element onto the screen.
6. Compositing: For complex pages, different parts might be painted onto separate layers and then composited together.

During this process, if the browser encounters external resources like images, CSS files, or JavaScript files, it initiates new HTTP requests to fetch them, repeating parts of the connection and request phases. JavaScript execution can modify the DOM and CSSOM, triggering further reflows and repaints, leading to a dynamic and interactive user experience.