public

System Design Explorer

Curated by Rajat Kumar

What happens when you type google.com?

A technical deep dive into the milliseconds that power the web. From a simple keystroke to pixels on your screen.

01

The Browser's Reaction

Before a single packet leaves your computer, the browser goes to work. It parses the URL (Uniform Resource Locator) to understand the protocol (https), the domain (google.com), and the resource (/).

Key Checks:

  • check_circle HSTS List: Is this site strictly HTTPS? (Google is!)
  • history Browser Cache: Do we already know the IP address?
  • dns OS Host File: Any local overrides?
https://google.com

Analogy: Checking your personal address book before calling directory assistance.

Browser Resolver Root (.) TLD (.com) Auth (google)
02

DNS Lookup

If the IP isn't in the cache, the browser asks the OS, which asks the Recursive Resolver (usually your ISP). The resolver then goes on a journey:

  1. Asks the Root Server (.): "Who handles .com?"
  2. Asks the TLD Server (.com): "Who handles google.com?"
  3. Asks the Authoritative Server (google.com): "What is the IP?"
  4. Gets the answer: 142.250.193.206
Phonebook

Analogy: Like asking a librarian for a book location. They check the section catalogue, then the shelf index, then point you to the exact slot.

03

TCP & TLS Handshake

With the IP address, the browser initiates a connection. This happens in two layers:

1. TCP Handshake (The Connection)

Ensures reliability. SYN ("Hello?"), SYN-ACK ("I hear you, you hear me?"), ACK ("Yes").

2. TLS Handshake (The Encryption)

Ensures security (HTTPS). Client Hello, Server Hello (Certificate), Key Exchange. Now no one can spy on your search.

Handshake

Analogy: TCP is picking up the phone and saying "Hello". TLS is agreeing to speak in a secret code so wiretappers can't understand.

Client Server SYN SYN-ACK ACK TLS Encrypted Tunnel Setup

GET / HTTP/1.1

Host: google.com

User-Agent: Mozilla/5.0...

Accept: text/html


// Server Processing...

// Load Balancer -> Web Server


HTTP/1.1 200 OK

Content-Type: text/html

<!DOCTYPE html>

<html>...

04

Request & Response

Secure connection established. Now the browser sends the HTTP GET request.

  • Load Balancer: Google receives the request and directs it to the best available server.
  • Processing: The server executes logic, fetches user preferences from a database, and generates the HTML.
  • Response: The server sends back a 200 OK status with the HTML content.
Letter

Analogy: You hand the chef (server) your order ticket (HTTP GET). They cook the meal (processing) and the waiter brings it to your table (Response).

05

Critical Rendering Path

The browser receives the HTML and starts the Critical Rendering Path to paint pixels on the screen.

DOM Tree

HTML is parsed into objects (nodes).

CSSOM Tree

CSS is parsed into styles.

Render Tree & Paint

DOM + CSSOM = Render Tree. The browser calculates Layout (geometry) and then Paints pixels.

HTML HEAD BODY div img