Browser Rendering Process Explained: What Really Happens When You Open a Website?

Have you ever wondered what happens after you type a URL into your browser and press Enter?

Most developers know that a webpage gets downloaded and displayed. But under the hood, the browser performs dozens of complex operations before a single pixel appears on the screen.

Understanding the browser rendering process is one of the most valuable skills for frontend developers. It helps you write faster websites, improve Core Web Vitals, optimize JavaScript, and debug performance issues more effectively.

In this article, I’ll walk through the entire browser rendering process step by step in a practical and easy-to-understand way.

Step 1: Entering the URL

Let’s say you type the following URL into your browser:

https://tekflo.dev

The browser first needs to figure out where this website is hosted.

Before making any network requests, it checks several caches:

Browser Cache
Operating System Cache
DNS Cache
Service Worker Cache

If the information isn’t available locally, the browser moves to the next step.

Step 2: DNS Lookup

Humans remember domain names, but computers communicate using IP addresses.

The browser needs to convert:

tekflo.dev

into something like:

142.250.183.206

This process is called DNS resolution.

The browser may check:

Browser DNS Cache
Operating System Cache
Router Cache
ISP DNS Server
Root and Authoritative DNS Servers

Once the IP address is found, the browser knows where to send the request.

Step 3: Establishing a Connection

Before exchanging data, the browser creates a connection with the server.

For HTTP and HTTPS, this usually involves a TCP handshake.

Client → SYN
Server → SYN-ACK
Client → ACK

Once completed, both parties are ready to communicate.

Step 4: TLS Handshake (For HTTPS)

Modern websites use HTTPS.

Before transferring any sensitive information, the browser verifies the server’s SSL certificate and establishes an encrypted connection.

This is what gives you the familiar padlock icon in the address bar.

At this point, communication becomes secure.

Step 5: Sending the HTTP Request

Now the browser finally sends a request to the server.

GET / HTTP/1.1
Host: tekflo.dev

The server processes the request and prepares a response.

Step 6: Receiving HTML

The server returns HTML content.

<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

A common misconception is that the browser waits for the entire HTML file before doing anything.

It doesn’t.

Modern browsers start processing the document as soon as data begins arriving.

Step 7: Building the DOM

The browser parses the HTML and converts it into a structure called the Document Object Model (DOM).

Think of the DOM as a tree representation of your HTML.

Document
 └── html
      └── body
           └── div
                ├── h1
                └── p

JavaScript interacts with this structure whenever you use methods like:

document.querySelector()
document.getElementById()

Step 8: Parsing CSS

While parsing HTML, the browser also discovers CSS files.

<link rel="stylesheet" href="style.css">

The CSS file is downloaded and parsed.

The browser reads every selector and style rule to understand how elements should look.

Step 9: Creating the CSSOM

After parsing CSS, the browser builds another tree called the CSS Object Model (CSSOM).

h1 {
  color: blue;
  font-size: 32px;
}

The CSSOM contains all style information required for rendering.

Step 10: Creating the Render Tree

The browser combines the DOM and CSSOM to create the Render Tree. The Render Tree contains only the elements that will actually appear on the screen.

p {
  display: none;
}

Elements hidden with display: none are excluded from the Render Tree.

Step 11: Layout (Reflow)

Once the Render Tree is ready, the browser calculates the size and position of every visible element.

Width
Height
Position
Spacing

This process is known as Layout or Reflow.

Step 12: Painting

After layout calculations are complete, the browser paints pixels on the screen.

Text
Colors
Borders
Images
Shadows
Backgrounds

Step 13: Compositing

Modern browsers create multiple layers for better performance.

transform
opacity
will-change

The GPU combines these layers into the final image shown on the screen.

This process is called compositing.

Why Developers Should Care

Understanding the rendering pipeline helps answer many performance-related questions.

Less Efficient

left: 100px;

Triggers:

Layout → Paint → Composite

More Efficient

transform: translateX(100px);

Triggers:

Composite

Fewer rendering steps result in better performance.

The Critical Rendering Path

HTML
 ↓
DOM
 ↓
CSSOM
 ↓
Render Tree
 ↓
Layout
 ↓
Paint
 ↓
Composite
 ↓
Screen

Every performance optimization ultimately aims to shorten this path.

Final Thoughts

The browser rendering process is the foundation behind page speed, smooth animations, Core Web Vitals, and overall user experience.

The next time you investigate a performance issue, remember that the browser is constantly building DOM trees, calculating layouts, painting pixels, and compositing layers behind the scenes.

The better you understand these concepts, the easier it becomes to build fast, responsive, and user-friendly web applications.

Browser Rendering Process Explained: What ReallyHappens When You Open a Website?