What Really Happens When You Type www.twitter.com and Hit Enter?
You’ve probably typed www.twitter.com into your browser thousands of times.
Twitter opens almost instantly… but have you ever wondered what actually happens inside the browser during those few milliseconds?
A browser doesn’t just “open a website.”
It goes on a fast, complex journey to fetch, understand, organize, and finally display the page on your screen.
In this blog, we’ll break that journey down step by step — without unnecessary jargon and without memorization.
What Is a Browser?
A browser is an application that allows users to access information on the internet by acting as a bridge between the user and the server.
Some popular browsers you already know:
- Google Chrome
- Safari
- Firefox
- Microsoft Edge
- Brave
- Opera
When you search or open a website in any of these browsers, a lot happens behind the scenes in milliseconds.
The Main Parts of a Browser (High-Level)
Think of a browser like a team of workers, each with a specific role.
1. User Interface (UI)
This is everything you interact with:
- Address bar
- Tabs
- Back/forward buttons
- Bookmarks
It’s the front desk of the browser.
Important: The UI does not display the website itself — it’s only for interaction.
2. Browser Engine
The coordinator.
It connects the User Interface with the Rendering Engine and tells other components what to do and when.
3. Rendering Engine
The artist.
Its job is to take raw HTML and CSS and turn them into something visual — the actual webpage you see.
Examples:
- Chrome → Blink
- Firefox → Gecko
- Safari → WebKit
4. JavaScript Engine
The specialist.
It executes JavaScript code and handles logic, events, and dynamic behavior.
Examples:
- Chrome → V8
- Firefox → SpiderMonkey
5. Networking
The delivery team.
Responsible for fetching HTML, CSS, JavaScript, images, fonts — everything needed from the server.
6. Data Storage
The storeroom.
Stores:
- Cache
- Cookies
- LocalStorage
- SessionStorage
This helps make future visits faster.
7. Graphics / UI Backend
The painter.
It draws text, images, shapes, and layouts on your screen using low-level graphics APIs.
High-Level Browser Flow
UI
↓
Browser Engine
↓
Rendering Engine + JavaScript Engine
↓
Networking
↓
Storage
↓
Screen
Now let’s walk through what happens when you press Enter.
Networking: Fetching the Website
When you type a URL and hit enter:
- The browser first checks cache
If the page exists and is valid, it may load instantly.
- If not, the browser performs a DNS lookup
- If not, the browser performs a DNS lookup
DNS converts
twitter.cominto an IP address.
- The browser sends an HTTP request to that IP.
- The server responds with:
HTML
CSS
JavaScript
Now the browser has raw files — but it still can’t display them yet.
HTML Parsing and DOM Creation
HTML is not used directly.
The browser parses the HTML and converts it into the DOM (Document Object Model).
The DOM is a tree-like structure that represents the page content.
Example HTML
<html>
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
</html>
DOM Tree (After Parsing)
HTML
└── BODY
├── H1
│ └── "Hello"
└── P
└── "Welcome"
Parsing simply means:
Breaking something into meaningful pieces so the browser can understand it.
CSS Parsing and CSSOM Creation
CSS is parsed separately.
The browser converts CSS into another structure called the CSSOM (CSS Object Model).
CSSOM defines:
- Colors
- Fonts
- Sizes
- Layout rules
Just like DOM describes what elements exist, CSSOM describes how those elements should look.
DOM + CSSOM = Render Tree
Now the magic happens.
- DOM → structure
- CSSOM → styles
The browser combines both to create the Render Tree.
The Render Tree:
- Contains only visible elements
- Acts as a blueprint for drawing the page
Layout (Reflow), Painting, and Display
Once the Render Tree is ready, the browser moves to the final stages.
1. Layout (Reflow)
The browser calculates:
- Exact position of each element
- Width and height
- Where everything fits on the screen
2. Painting
The browser fills pixels:
- Text
- Colors
- Images
- Borders
- Shadows
3. Display (Compositing)
All painted layers are combined and displayed on the screen.
This is the moment when you actually see the webpage.
The Complete Flow (Big Picture)
URL typed
↓
DNS lookup + HTTP request
↓
HTML → DOM
CSS → CSSOM
↓
DOM + CSSOM → Render Tree
↓
Layout (Reflow)
↓
Paint
↓
Pixels on screen
Final Thought
Don’t focus on memorizing names.
Focus on the journey:
Fetch → Understand → Organize → Draw
Every time you open a website, your browser runs this entire pipeline in milliseconds — quietly, efficiently, and repeatedly.
And that’s what makes the web feel instant. 🚀