You
www.google.com
Enter
Your Browser
https://Protocol
www.Subdomain
google.comDomain
/searchPath
?q=helloQuery

User Enters URL

The journey begins when you type a website address (URL) into your browser's address bar and press Enter. The browser now needs to figure out how to reach that website.

What is a URL?

  • https:// is the protocol
  • www. is a subdomain
  • google.com is the domain
  • /search is the path
  • ?q=hello is the query
Browser Cache MISS
OS Cache MISS
Router Cache MISS
ISP Cache MISS
Cache miss → Query DNS server

Check Cache

Before making any network requests, the browser checks if it already knows the IP address for this domain. It searches through multiple cache layers.

Cache Hierarchy

  • Browser Cache: Recently visited sites stored in browser memory
  • OS Cache: Operating system's DNS resolver cache
  • Router Cache: Your home router's cached DNS entries
  • ISP Cache: Your Internet Service Provider's DNS cache
Root Server .
"Ask .com TLD"
.com TLD Server .com
"Ask Google's NS"
Authoritative NS google.com
142.250.185.46
Resolved IP Address

DNS Resolution

DNS (Domain Name System) translates human-readable domain names into IP addresses that computers use to identify each other on the network.

DNS Hierarchy

  • Root Server: Knows where to find TLD servers (.com, .org, etc.)
  • TLD Server: Knows which authoritative servers handle specific domains
  • Authoritative NS: Has the actual IP address for the domain
Your Browser
SYN
SYN + ACK
ACK
Google Server
TCP Connection Established

TCP 3-Way Handshake

Before any data can be exchanged, a reliable connection must be established using the TCP (Transmission Control Protocol) three-way handshake.

The Three-Way Handshake

  • SYN: Client sends a synchronization request
  • SYN-ACK: Server acknowledges and sends its own sync
  • ACK: Client acknowledges, connection is now established
Your Browser
Client Hello
Server Hello + Certificate
Key Exchange
Google Server
Secure Channel

TLS Handshake

For HTTPS connections, a TLS (Transport Layer Security) handshake establishes an encrypted communication channel to protect your data.

TLS Handshake Steps

  • Client Hello: Browser sends supported encryption methods
  • Server Hello: Server sends its certificate and chosen encryption
  • Key Exchange: Both parties establish shared encryption keys
  • Secure Channel: All further communication is encrypted
Your Browser
GET/HTTP/2
Hostwww.google.com
Accepttext/html
Accept-Languagepl-PL, en
User-AgentChrome/120
GET /
Google Server

HTTP Request

Your browser sends an HTTP GET request to the server, asking for the webpage content. The request includes headers with information about your browser and what content you can accept.

HTTP Request Components

  • Method: GET (retrieve), POST (submit), etc.
  • Path: The specific resource being requested
  • Headers: Metadata about the request
  • Body: Optional data (mainly for POST requests)
Your Browser
HTTP/2200 OK
Content-Typetext/html
Cache-Controlmax-age=3600
HTML48 KB
CSS22 KB
JS96 KB
200 OK
Google Server

Server Response

The server processes your request and sends back a response containing the HTML document, along with CSS stylesheets and JavaScript files needed to render the page.

Response Contents

  • Status Code: 200 OK, 404 Not Found, etc.
  • HTML: The structure and content of the page
  • CSS: Styling rules for visual presentation
  • JavaScript: Code for interactivity and dynamic behavior
Parse HTML
Tokenizer
DOM Tree
Parse CSS
Tokenizer
CSSOM Tree
Load JavaScript
Render Tree
Layout
Paint
Page Successfully Loaded!

Browser Rendering

The browser processes all received files to construct and display the final webpage. This involves parsing, building tree structures, and painting pixels on screen.

Rendering Pipeline

  • DOM Tree: HTML is parsed into a Document Object Model
  • CSSOM Tree: CSS is parsed into a style object model
  • JavaScript: a script can change the DOM and CSSOM
  • Render Tree: DOM + CSSOM combined for visible elements
  • Layout: Calculate exact position and size of elements
  • Paint: Fill in pixels on the screen

←→ steps · Space auto play