When we type a URL in the browser and press Enter, a lot happens behind the scenes before the webpage appears on the screen. Understanding this process is important for frontend developers because it explains why some websites load instantly while others show a blank screen first.
In this article, we’ll walk through:
- How a browser processes a request
- How the UI is rendered
- Where React, Client-Side Rendering (CSR), and Server-Side Rendering (SSR) come into play
1. The Request Process
When a user enters a URL like:
https://example.com
the browser performs several steps.
Step 1: Check Cache
The browser first checks whether the website resources are already stored locally in cache.
Step 2: DNS Lookup
If not found, the browser asks the Domain Name System to convert the domain name into an IP address.
Example:
example.com → 93.184.216.34
Step 3: Establish Connection
The browser opens a connection with the server using Transmission Control Protocol.
If the website uses HTTPS, a secure connection is established using Transport Layer Security.
Step 4: Send HTTP Request
The browser sends a request like:
GET /index.html HTTP/1.1
Host: example.com
2. Server Response
The server sends back resources such as:
- HTML
- CSS
- JavaScript
- Images
- Fonts
These resources are often sent in chunks (streams), meaning the browser starts processing them before the entire file finishes downloading.
3. HTML Parsing and DOM Creation
Once the browser receives HTML, it begins parsing it immediately.
The browser converts HTML elements into a tree structure called the Document Object Model.
Example HTML:
<body>
<h1>Products</h1>
<p>Item 1</p>
</body>
DOM structure:
body
├── h1
└── p
This structure allows JavaScript to access and modify elements dynamically.
4. CSS Parsing and CSSOM
When the browser encounters CSS files or <style> tags, it creates another structure called the CSS Object Model.
This maps selectors to their styles.
Example:
p {
color: blue;
}
The browser builds a tree of style rules and applies them to the DOM elements.
5. Render Tree Creation
The browser combines:
- DOM
- CSSOM
to create a Render Tree.
This tree contains only visible elements.
Elements excluded include:
<meta><head>- elements with
display: none
6. Layout (Reflow)
Next, the browser calculates the position and size of each element.
It determines:
- width and height
- position on the X and Y axis
- how elements flow on the page
This step ensures the UI fits the device viewport correctly.
7. Paint
Once layout is calculated, the browser fills visual details such as:
- colors
- borders
- text
- shadows
- images
At this stage the page becomes visually complete.
8. Compositing
Some elements are rendered on separate layers, such as:
- sticky headers
- popups
- animations
- transformed elements
These layers are sent to the GPU to render efficiently.
This final step is called compositing.
9. Where JavaScript Fits In
When the browser encounters a script:
<script src="app.js"></script>
HTML parsing pauses, and the browser:
- downloads the JavaScript
- executes it
- resumes HTML parsing
This is why JavaScript can block page rendering.
To avoid blocking, developers use:
<script defer src="app.js"></script>
<script async src="analytics.js"></script>
asyncexecutes immediately after download
deferexecutes after HTML parsing finishes
10. Client-Side Rendering (CSR)
Many modern web apps built with React use Client-Side Rendering.
In CSR, the server sends minimal HTML:
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
The browser initially sees:
empty page
Then JavaScript runs and React builds the UI.
Example React code:
ReactDOM.createRoot(root).render(<App />)
React generates the DOM elements dynamically.
User Experience
page loads
↓
blank screen
↓
JavaScript loads
↓
UI appears
11. Server-Side Rendering (SSR)
Frameworks like Next.js use Server-Side Rendering.
Instead of sending empty HTML, the server renders the React components and sends fully built HTML.
Example response:
<div id="root">
<h1>Products</h1>
<p>Item 1</p>
</div>
Now the browser displays content immediately.
12. Hydration
After SSR HTML loads, JavaScript still downloads.
React then attaches event handlers to the existing HTML.
This process is called Hydration.
Before hydration:
button visible but not clickable
After hydration:
button becomes interactive
CSR vs SSR Comparison
| Feature | CSR | SSR |
|---|---|---|
| Initial HTML | Empty | Fully rendered |
| First load | Blank screen | Content appears instantly |
| SEO | Limited | Better |
| Rendering location | Browser | Server |
Understanding how the browser renders a webpage helps frontend developers:
- optimize performance
- avoid render-blocking issues
- improve user experience
- choose the right rendering strategy
CSR is great for highly interactive applications, while SSR improves initial load performance and SEO.
Modern frameworks like Next.js combine both approaches to deliver the best user experience.
SOCIAL SHARE CARD GENERATOR