You type:
https://example.com
Press Enter.
A few milliseconds later, the website appears.
Simple, right?
Not really. 😄
Behind that single Enter key is a chain of networking, security, server-side processing, and browser rendering.
Here's what actually happens.
1. The Browser Checks: "Do I Already Know This?"
Before asking the internet anything, your browser checks whether it already has useful information cached.
It may check:
- Browser cache
- Operating system DNS cache
- Router cache
If the IP address is already available, it can skip a DNS lookup.
If not, it's time to ask DNS.
2. DNS Turns the Domain Into an IP Address
Humans use names like:
example.com
Computers need an IP address.
DNS acts like the internet's phonebook:
example.com → 93.184.216.34
Your request may involve multiple DNS servers before the correct IP address is found.
Now the browser knows where to send the request.
3. A Connection Is Established
For most HTTPS websites, the browser needs to establish a connection with the server.
Traditionally, this begins with TCP's famous three-way handshake:
Browser → SYN → Server
Browser ← SYN-ACK ← Server
Browser → ACK → Server
Now both sides are ready to communicate reliably.
4. HTTPS Adds a Security Layer
Because we're visiting:
https://example.com
the browser also needs to establish an encrypted connection.
This involves a TLS handshake.
During this process, the browser verifies the server's certificate and both sides establish encryption keys.
After this, the data exchanged between your browser and the server is encrypted.
That's why HTTPS matters.
5. The Browser Sends the HTTP Request
Now the browser can finally ask for the page.
Something conceptually like this:
GET / HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html
That request travels across the internet to the server.
6. The Server Starts Doing Its Job
What happens next depends on the application.
The request might go through:
Load Balancer
↓
Web Server
↓
Backend Application
↓
Database / Cache / External Services
For example, in a NestJS application:
Request
↓
Middleware
↓
Guard
↓
Controller
↓
Service
↓
Database
↓
Response
The server processes the request and sends something back.
7. The Browser Receives HTML
Imagine the server returns:
<html>
<head>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1>Hello World</h1>
<script src="/app.js"></script>
</body>
</html>
The browser doesn't just instantly display this.
It starts parsing it.
8. HTML Becomes the DOM
The browser converts HTML into the DOM (Document Object Model).
Conceptually:
HTML
↓
Parser
↓
DOM Tree
At the same time, it discovers other resources.
For example:
styles.css
app.js
images
fonts
And begins fetching them.
9. CSS Builds the CSSOM
CSS is also parsed into a structure called the:
CSS Object Model (CSSOM)
So now the browser has:
DOM + CSSOM
These are combined to determine what should actually appear on the screen.
10. The Browser Creates the Page You See
The browser goes through several rendering steps:
DOM + CSSOM
↓
Render Tree
↓
Layout
↓
Paint
↓
Compositing
↓
🎉 Website appears
Layout
The browser calculates:
Where should every element go?
Paint
It draws:
Text, colors, borders, shadows, images...
Compositing
Different layers are combined and displayed on your screen.
And finally...
You see the website.
The Crazy Part?
All of this happens after you press one key:
Enter
Your browser may perform DNS resolution, establish secure connections, send requests, receive responses, download resources, execute JavaScript, calculate layouts, and render pixels...
Often in less than a second.
The next time a website takes "just a few seconds" to load, remember:
A lot has to happen before even one pixel appears on your screen.
The Full Journey
Type URL
↓
Check Cache
↓
DNS Lookup
↓
Connect to Server
↓
TLS Handshake
↓
HTTP Request
↓
Server Processing
↓
HTTP Response
↓
Parse HTML → DOM
↓
Parse CSS → CSSOM
↓
Fetch JS / Images / Fonts
↓
Render Tree
↓
Layout
↓
Paint
↓
Compositing
↓
Website 🎉
Understanding this flow changed the way I think about web development.
A frontend isn't just "sending an API request."
A backend isn't just "returning JSON."
And a browser isn't just "showing a page."
They're all part of one incredibly coordinated system.
The web feels simple because an absurd amount of complexity is hidden behind one URL.
💬 What part of this journey do you find the most interesting: DNS, HTTPS, backend processing, or browser rendering?
