You type:
https://example.com
Press Enter.
And within seconds, the website appears on your screen.
But have you ever wondered what actually happens between pressing Enter and seeing the webpage?
Behind this simple action, your browser performs an incredible chain of operations.
Let's follow the journey.
The Big Picture
You Enter a URL
↓
DNS
↓
IP Address
↓
Server Connection
↓
HTTP Request
↓
Server
↓
HTTP Response
↓
HTML + CSS + JS
↓
Browser Rendering
↓
Website on Screen
Let's break it down step by step.
1. You Enter a URL
Suppose you type:
https://example.com
This URL tells the browser what resource you want to access and where to look for it.
But there is one problem.
Computers don't really communicate using domain names like:
example.com
They communicate using IP addresses, such as:
93.184.216.34
So the browser first needs to answer one important question:
"Where is example.com located?"
That's where DNS comes in.
2. DNS Finds the Website
DNS stands for Domain Name System.
Think of it as the phonebook of the internet.
example.com
↓
DNS
↓
93.184.216.34
The browser asks DNS:
"What is the IP address for
example.com?"
DNS returns the address associated with that domain.
Now the browser knows where it needs to go. DNS lookups may also benefit from caching, so the browser does not necessarily need to repeat the full lookup every time.
3. The Browser Connects to the Server
Now that the browser knows the server's IP address, it establishes communication with the destination.
For an HTTPS website, the browser also needs to establish a secure connection before exchanging sensitive data.
Then the browser is ready to ask for the webpage.
4. The Browser Sends an HTTP Request
Your browser sends a request similar to:
GET / HTTP/1.1
Host: example.com
In simple terms, the browser is saying:
"Hey server, I want the homepage of this website."
This communication happens using HTTP or HTTPS, which defines how browsers and servers exchange requests and responses.
5. The Server Sends Back a Response
The server receives the request and sends a response.
That response may contain:
- HTML
- CSS
- JavaScript
- Images
- Fonts
- Other assets
The first response commonly gives the browser the initial HTML document.
And this is where the browser's real work begins.
6. HTML Becomes the DOM
The browser starts reading the HTML.
Imagine this:
<body>
<h1>Hello World</h1>
<p>Welcome to my website.</p>
</body>
The browser converts this HTML into a tree-like structure called the DOM (Document Object Model).
HTML
│
BODY
/ \
H1 P
│ │
Hello Welcome
The DOM becomes the browser's internal representation of the page structure.
But right now, the page still doesn't know how it should look.
That's CSS's job.
7. CSS Tells the Browser How Everything Should Look
The browser processes CSS rules such as:
h1 {
color: blue;
font-size: 40px;
}
CSS answers questions like:
- What color should this element be?
- How big should it be?
- Where should it appear?
- How much space should it take?
The browser creates a structure based on these styling rules, often described as the CSSOM.
HTML → DOM
CSS → CSSOM
Then it combines the relevant information to prepare the page for rendering.
8. DOM + CSS = Render Tree
Now the browser combines:
DOM + CSSOM
to create the Render Tree.
The Render Tree focuses on the elements that need to be displayed.
DOM
+
CSSOM
↓
Render Tree
Now the browser knows:
What should appear on the screen and how it should look.
But it still needs to calculate where everything should go.
9. Layout: Calculating Positions
The browser calculates the:
- Width
- Height
- Position
- Spacing
of every visible element.
For example:
┌──────────────────────────────┐
│ Header │
├──────────────────────────────┤
│ │
│ Main Content │
│ │
├──────────────────────────────┤
│ Footer │
└──────────────────────────────┘
This process is called Layout.
The browser now knows the exact geometry of the page.
10. Paint: Turning Everything Into Pixels
Now comes the step where the browser actually draws:
- Text
- Colors
- Borders
- Images
- Shadows
- Buttons
onto the screen.
Render Tree
↓
Layout
↓
Paint
↓
Pixels 🎉
Finally...
You see the website!
The browser's rendering process broadly involves building the relevant document and style structures, calculating layout, and painting pixels to the screen.
But What About JavaScript?
JavaScript makes the website interactive.
It handles things like:
- Button clicks
- Form submissions
- Dropdowns
- Animations
- API calls
- Dynamic content
For example:
button.addEventListener("click", () => {
alert("Hello!");
});
JavaScript can also modify the DOM and change what you see on the page. As the browser discovers scripts, stylesheets, images, and other resources, it may make additional requests and process them as part of loading the complete experience.
The Complete Journey
So, the next time you open a website, remember this:
You type a URL
↓
Browser finds the IP using DNS
↓
Secure connection is established
↓
Browser sends an HTTP request
↓
Server sends a response
↓
Browser receives HTML
↓
HTML → DOM
↓
CSS → CSSOM
↓
DOM + CSSOM → Render Tree
↓
Layout
↓
Paint
↓
JavaScript adds interactivity
↓
🎉 Website appears on your screen
Why Should Frontend Developers Understand This?
Because every frontend performance problem connects to this journey.
For example:
- Slow DNS? → Navigation is delayed.
- Slow server response? → HTML arrives late.
- Large CSS files? → Rendering can be delayed.
- Heavy JavaScript? → The page may become slow or unresponsive.
- Large images? → More data needs to be downloaded and rendered.
Understanding this flow helps you understand why websites become slow — not just how to write frontend code.
Final Thought
Opening a website feels almost instant.
But in those few seconds, your browser has:
Found a server → communicated across the internet → requested resources → downloaded files → built the page structure → applied styles → calculated layouts → painted pixels → and executed JavaScript.
All from one simple action:
Pressing Enter.
The web might look simple from the outside.
*But underneath every page is a fascinating chain of engineering. *
