SystemDesign.website
Track 1 ยท Module 1.6 ยท The Complete Journey

What Happens When You
Type a URL in Your Browser?

The single most famous interview question in computer science. Follow a single packet from your keyboard, through DNS, TCP, encryption, load balancers, and servers โ€” until pixels appear on your screen.

โฑ๏ธ Reading Time: ~20 min
๐ŸŽฏ Capstone: Uniting Modules 1.1 through 1.5
๐ŸŽฌ Format: Interactive Architecture Diagram
๐ŸŽฌ Master Architecture Simulator

Follow the Packet Across the System

1. Client Devicehttps://google.comBrowser (192.168.1.15)3. Local Wi-Fi GatewayDefault Gateway (ARP)192.168.1.12. DNS Recursive Resolver8.8.8.8Root (.) โž” .com TLDโž” Auth: ns1.google.com142.250.190.464, 5, 6. Edge Ingress & SecurityCDN EdgeStatic < 5msLoad BalancerTLS 1.3 Term7. Google Datacenter (Compute & Data)App Server Tier (epoll / async)Redis CacheHOT DATASESSIONSRESULTS~100 ns RAMDatabasePersistent Disk~10 ms IO
Stage 1: You Type a URL and Hit EnterYour Laptop

You type https://www.google.com and press Enter. The browser splits this URL into parts โ€” the protocol (https), the website name (www.google.com), and the port (443). It also checks its HSTS safety list to make sure the connection will be encrypted, even on public Wi-Fi. No network request has happened yet โ€” this is all local.

๐Ÿ” 1. You Type a URL and Hit Enter

โŒจ๏ธ What happens at your keyboard

The moment you press Enter, your browser does two things before sending anything over the internet:

https://www.google.com:443/search?q=system+design
ProtocolWebsite NamePort NumberPage PathSearch Query

Step 1 โ€” URL Parsing: The browser splits the URL into its parts. The protocol (https) tells it to use encryption. The website name (www.google.com) tells it which server to contact. The port (443) is like a door number on that server โ€” port 443 is the standard door for encrypted traffic.

๐Ÿ›ก๏ธ Step 2 โ€” HSTS Safety Check:

Imagine you're at a coffee shop using public Wi-Fi. If you type google.com without the https://, your first request would go unencrypted โ€” meaning anyone on that Wi-Fi could read it. To prevent this, browsers keep a safety list of websites that should always use HTTPS. Google is on that list. So even if you forget to type https://, the browser adds it automatically. This all happens locally on your laptop โ€” no network request has been made yet.

๐Ÿ“ฎ 2. DNS โ€” Converting the Website Name to a Number

๐Ÿ“– Think of it as a phonebook lookup

Your laptop knows it wants to talk to www.google.com, but the internet doesn't understand names โ€” it only understands numbers called IP addresses (like 142.250.190.46). So the browser needs to look up the number for that name. This is called DNS resolution.

It's exactly like looking up a phone number in a phonebook. You know the person's name, but you need their number to call them. DNS is the internet's phonebook.

๐Ÿ’ป Your BrowserCheck local cache first๐Ÿ“ฎ DNS Resolver8.8.8.8 (Google DNS)1. Root Server (.)Says: "Ask the .com server"2. TLD Server (.com)Says: "Ask Google's server"3. Google's DNS ServerReturns: 142.250.190.46โœ… Found the IP Address!142.250.190.46

Key insight: This lookup doesn't happen every time. Once your browser learns the IP address, it remembers it (caches it) for minutes to hours. So the next time you visit Google, it skips this entire step!

๐Ÿ“ก 3. Leaving Your Wi-Fi Network (ARP Protocol)

๐Ÿšช Your packet needs to leave the building

Your laptop now knows the IP address 142.250.190.46. But Google's server is on the other side of the world โ€” not on your local Wi-Fi network. So the packet needs to leave your home network first.

Step 1: "Is it local or far away?"

Your laptop checks: "Is 142.250.190.46 on my local Wi-Fi network?" It compares the IP against its own network range (like 192.168.1.x). Since Google's IP is clearly outside that range, the laptop knows it needs to send this packet to its Wi-Fi router (the default gateway), which will forward it to the internet.

Step 2: "What is my router's hardware address?"

Devices on Wi-Fi identify each other by MAC addresses (physical hardware IDs). Your laptop shouts to the entire network: "Who has IP 192.168.1.1? Tell me your MAC address!" Your router replies: "That's me! My MAC is AA:BB:CC:11:22:33." Now the packet gets wrapped in an envelope addressed to the router and is sent over the Wi-Fi radio waves.

๐Ÿค 4. Building a Secure Connection (TCP + TLS)

๐Ÿ“ž Like making a phone call โ€” you need to say "Hello" first

Before your browser can send any actual data (like "search for system design"), it first needs to establish two things with Google's server: (1) a reliable connection and (2) encryption.

๐Ÿ’ป Your Browserโšก Google's ServerTCPReliableConnection1. "Hey, let's talk!" (SYN)2. "Sure, I'm ready!" (SYN-ACK)3. "Great, let's go!" (ACK)TLS 1.3EncryptionSetup4. "Here's my encryption key" (ClientHello)5. "Here's mine + my ID" (ServerHello)๐Ÿ”’ Connection is now encrypted! Safe to send data.

Why two handshakes? The TCP handshake (steps 1โ€“3) makes sure both sides are awake and ready โ€” like saying "Hello" on a phone call. The TLS handshake (steps 4โ€“5) sets up encryption โ€” like switching to a private line so nobody can eavesdrop. After this, everything is encrypted and your actual search query can be sent safely.

โฑ๏ธ How fast is this?

The TCP handshake takes 1 round trip (your message goes to Google and a reply comes back). TLS 1.3 also takes 1 round trip. If Google's server is 50 milliseconds away, the total setup time is about 100ms โ€” one tenth of a second. After that, data flows freely.

๐Ÿข 5. Inside Google's Datacenter

๐Ÿ”— Connects to Modules 1.2, 1.3, and 1.4

Your encrypted search request has arrived at Google's datacenter. Now it passes through three layers:

1. CDN Edge

If you're loading an image, CSS, or JavaScript โ€” the CDN (Content Delivery Network) can serve it from a server near you, without going to the main datacenter. Think of it as a local warehouse that stores copies of popular items near your city. Response time: <5ms.

2. Load Balancer

Google has thousands of servers. The Load Balancer is like a receptionist โ€” it looks at your request and decides which server should handle it. It spreads traffic evenly so no single server gets overwhelmed and crashes.

3. Server + Database

The server first checks the Cache (super fast temporary memory) โ€” if your search was done recently, the answer is already there (~100 nanoseconds). If not, it queries the Database (permanent storage, ~10 milliseconds). It builds the HTML response and sends it back.

๐ŸŽจ 6. Painting the Page on Your Screen

๐Ÿ–ฅ๏ธ From raw code to visual pixels

Google's server sends back HTML and CSS code. Your browser now needs to turn that code into the actual visual page you see. This happens in 5 steps:

1. DOM TreeParse HTML2. CSSOM TreeParse CSS Styles3. Render TreeCombine Both4. LayoutCalculate Sizes5. PaintDraw Pixels

In plain English: The browser reads the HTML to figure out what is on the page (headings, paragraphs, images). Then it reads the CSS to figure out how it looks (colors, fonts, spacing). It combines them into a "Render Tree" โ€” only including things that are actually visible. Then it calculates where everything goes on screen (Layout), and finally draws the actual colored pixels (Paint).

โšก Total Time Budget

The whole process โ€” from pressing Enter to seeing the Google search page โ€” takes about 200โ€“500 milliseconds. That's less than half a second. DNS lookup (~20ms) + TCP handshake (~50ms) + TLS handshake (~50ms) + Server processing (~30ms) + Data transfer (~50ms) + Browser rendering (~100ms) = ~300ms total.

๐ŸŽฏ 7. Test Your Understanding

Scenario 1: The DNS Caching Question

An interviewer asks: "When a user in London visits google.com, does their laptop query the Root DNS servers every single time?"

Scenario 2: Render-Blocking Scripts

Why does putting a heavy <script src="bundle.js"> tag in the HTML <head> freeze the page from rendering?

โ—‹

Completed this module?

Mark as finished to update your curriculum progress tracker.