🔍 What Happens When You Type a URL in the Browser?

Have you ever wondered what really happens under the hood when you type something like https://example.com into your browser’s address bar and hit Enter? It's easy to overlook how complex this seemingly simple process is. In this blog, we’ll walk through the complete sequence of events, from URL entry to seeing the final rendered web page.

1. Step 1: Browser Checks the Cache (DNS Lookup Begins)

When you type a URL (e.g., https://example.com), the browser first tries to resolve the domain name into an IP address using a multi-layered DNS caching mechanism.

The cache is checked in this order:

• Browser cache: Did the browser recently resolve example.com?

• OS cache: Your operating system (like Windows, macOS, or Linux) maintains its own DNS cache.

• Router cache: Your home/office router might also store recently resolved domain-IP pairs.

• ISP's DNS cache: Your Internet Service Provider keeps a cache to reduce lookup times.

✅ If found: The cached IP address is used directly, skipping DNS resolution.

❌ If not found: Proceed to DNS Resolution

2. Step 2: DNS Resolution (Getting the IP Address)

If the IP isn’t cached, a full DNS resolution process kicks in:

1. Recursive DNS Resolver (typically from your ISP or a third party like Google Public DNS) begins the job.

2. It queries the Root DNS Server (e.g., ., the highest level of the DNS hierarchy).

3. The root server responds with the address of the Top-Level Domain (TLD) server for .com.

4. The resolver then contacts the TLD server, which responds with the authoritative nameserver for example.com.

5. Finally, the resolver contacts the Authoritative DNS Server, which returns the IP address of example.com.

This IP address is returned to the browser and stored in local caches (browser, OS, and DNS resolver) for future use.

3. Step 3: Establishing a TCP Connection

Now that the browser has the IP address, it needs to establish a connection with the server.

It does this via the TCP three-way handshake over port 80 (HTTP) or port 443 (HTTPS):

1. SYN: Client (browser) sends a synchronize (SYN) message.

2. SYN-ACK: Server responds with a synchronize-acknowledge (SYN-ACK).

3. ACK: Browser sends back an acknowledgment (ACK).

TCP ensures reliable, ordered, and error-checked delivery of data between client and server.

4. Step 4: SSL/TLS Handshake (If HTTPS)

If the URL begins with https://, the browser initiates an SSL/TLS handshake to establish a secure connection:

1. Client Hello: The browser sends supported SSL/TLS versions, cipher suites, and a randomly generated number.

2. Server Hello: The server responds with its certificate, chosen cipher, and its random number.

3. Certificate Validation: The browser validates the server's certificate via Certificate Authorities (CAs).

4. Key Exchange: Both parties generate a shared secret key using asymmetric encryption (like Diffie-Hellman).

5. A secure encrypted channel is now established over which all HTTP data will be sent.

5. Step 5: Sending the HTTP Request

Now the browser sends an HTTP request to the server. This includes:

• The HTTP method (GET, POST, etc.)

• The path (e.g., /index.html)

• Headers like User-Agent, Accept, Cookies

• Sometimes a body, especially for POST or PUT requests

GET / HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html

6. Step 6: Server Processes and Sends HTTP Response

The web server processes the request — possibly involving:

• Backend logic (e.g., fetching from a database)

• Middleware or API calls

• Generating a dynamic or static HTML page

The server responds with:

• Status code (e.g., 200 OK, 404 Not Found)

• Response headers (Content-Type, Content-Length, Set-Cookie, etc.)

• Response body (HTML, JSON, image, etc.)

🧾 Example:

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1245

7. Step 7: Browser Receives and Renders the Page

Now comes the visual magic! The browser receives the HTML and begins rendering the page:

a) Parsing HTML

• The browser parses HTML into a DOM (Document Object Model) tree.

b) Parsing CSS

• It parses all stylesheets and constructs a CSSOM (CSS Object Model).

c) Rendering Tree

• Combines DOM and CSSOM into a Render Tree.

d) Layout & Paint

• The browser calculates where each element goes (layout), then paints pixels to the screen.

e) JavaScript Execution

• Any <script> tags are executed.

• JavaScript can modify the DOM dynamically (via the Render Cycle).

📦 Also, the browser may:

• Fetch other resources like images, fonts, stylesheets

• Open additional TCP connections (sometimes using HTTP/2 multiplexing)

🧠 Bonus: What if You Visit Again?

Next time you visit the same site:

• DNS cache will likely have the IP

• TLS session resumption might occur

• Resources (CSS, JS, images) could be served from the browser cache

• The page will load significantly faster