From Typing URL To Showing the Webpage

What happens along a request's journey?

What happens when you type a valid URL in your browser and press Enter?

That single action triggers a complex sequence of events involving networking, protocols, DNS resolution, HTTP communication, rendering engines, and more.

Let’s walk through each stage of this journey in a way that’s easy to understand but still technically meaningful.

The diagram below shows the detailed process flow.

You can check the image on Eraser.io

1 - You Type the Address in the Browser

It starts simply enough. You type google.com into the browser’s address bar and hit enter.

But this isn’t just text. The browser must determine:

• Is this a search query or a URL?

• Does the URL include a scheme (http://, https://)?

• Are there any typos or local shortcuts?

If valid, the browser treats it as a URL and begins processing.

2 - Browser Cache Check

Before making any external network calls, the browser checks:

• DNS cache – Does it already know the IP address for the website?

• HTTP cache – Does it already have a valid, unexpired version of the page?

• OS-level cache – Has the system recently resolved this domain?

If there’s a cache hit, the browser skips DNS lookup or page fetch altogether. If not, it proceeds to find the IP address via DNS lookup.

3 - DNS Lookup: Finding the IP Address

DNS (Domain Name System) is like the internet’s phone book. You know the domain name (for example, “gmail[dot]com”), but the browser needs the IP address to connect.

Here’s how it unfolds:

1. Browser/OS checks local DNS cache.

2. If it misses, it queries the DNS resolver (usually provided by your ISP or a public DNS like Google DNS or Cloudflare).

3. The resolver checks:

   • Root server → Directs to .com TLD servers.

   • TLD server → Directs to authoritative server for the domain

   • Authoritative server → Responds with the correct IP.

This is all typically resolved in milliseconds.

📌 Pro Tip: Many modern DNS resolvers cache frequent lookups and support DNS-over-HTTPS for added security.

4 - TCP Connection and the Three-Way Handshake

Now that the IP address is known, the browser initiates a TCP connection with the web server. This forms the foundation of reliable communication.

With HTTP/1.1, this starts with the famous three-way handshake:

1. SYN – Browser (client) sends a connection request.

2. SYN-ACK – Server acknowledges and responds.

3. ACK – Browser acknowledges back.

If the website uses HTTPS (which Google does), there’s an extra step called the TLS handshake:

• The client and server agree on encryption protocols.

• The server provides a certificate.

• They establish a secure session.

In newer protocols like HTTP/3, this handshake is optimized using QUIC over UDP for faster connections.

5 - Sending the HTTP Request

With the connection established, the browser sends an HTTP GET request to fetch the page:

GET / HTTP/1.1 Host: gmail.com

The server processes the request and responds with:

• HTML (the page structure)

• CSS (styles)

• JavaScript (behavior)

• Other assets like images and fonts

Headers and cookies are exchanged here too, managing things like user sessions, cache control, and content negotiation.

6 - Browser Parses the HTML

Now the browser gets to work interpreting the raw HTML.

It performs:

• Tokenization – Splitting the HTML into individual pieces.

• Parsing – Understanding the structure and relationships.

• DOM Construction – Building the Document Object Model (DOM), a tree-like structure representing the page.

• CSSOM Construction – Parsing CSS into a separate tree.

If JavaScript is encountered and marked as blocking, the browser pauses HTML parsing until the script executes. This can delay rendering, so modern apps often use async or defer attributes.

7 - Rendering the Page

Once the DOM and CSSOM trees are built, the browser proceeds to render the page:

1. Render Tree Creation – Combines DOM + CSSOM to understand what should be visible.

2. Layout Phase – Calculates positions and sizes of elements on the page.

3. Paint Phase – Converts elements into actual pixels.

4. Compositing – Layers are merged together in the right order.

The browser may use GPU acceleration here to speed up rendering.

Modern browsers also use lazy loading, preloading, and prefetching to optimize perceived performance.

8 - Page Appears on Your Screen

Finally, you see the fully rendered page—complete with images, layout, and interactivity. Behind the scenes, your browser may continue downloading other resources (e.g., scripts or fonts) or executing JavaScript to load additional content dynamically (like search suggestions or user-specific data).

From that simple act of typing a URL, you’ve triggered:

• Multiple network requests

• A series of protocol handshakes

• Page layout and rendering processes

• Code execution within a secure runtime

All in just a few hundred milliseconds.

👉 So - is there anything else you will add to this flow?

---

Shoutout

Here are some interesting articles I’ve read recently:

• This engineer tracked his time for more than a year and this is what he learned by

  Fran Soto

• When Time Is Short, Choose Boring Tech by

  Riccardo Causo

• Be Critical About Any SWE Advice by

  Petar Ivanov

• 20 Git Commands EVERY Developer Should Know by

  Ashish Pratap Singh

---

That’s it for today! ☀️

Enjoyed this issue of the newsletter?

Share with your friends and colleagues.