DEV Community

Rajat Yadav
Rajat Yadav

Posted on

How a Browser Works: A Beginner-Friendly Guide to Browser Internals

#webdev #computerscience #tutorial #beginners

You’re sitting at your computer.
You type:

https://chaicode.com
Enter fullscreen mode Exit fullscreen mode

You press Enter.

And boom the website appears.

But what actually happened in that tiiny moment?
It feels intant, but behind the scenes ur browser just did alot of work. Like seriously a lot.

It contacted servers, downloaded files, parsed code, built trees, calculated layouts, painted pixels and finally showed it to you.

Let’s break it down slowly and visually.

First, What Even Is a Browser?

Most beginners think:

“Browser? It opens websites.”

Technically true. But that’s like saying:

“Chef? He just makes food.”

Not enough.

A browser is more like a translator + manager + artist + delivery system all combined together.

When you visit a website, your browser:

  1. Fetches files from a server
  2. Understands (parses) HTML, CSS, JavaScript
  3. Builds internal structures
  4. Calculates layout
  5. Paints pixels
  6. Displays everything on your screen

It’s doing way more than we realise, honestly.

The Main Parts of a Browser (Restaurant Analogy 🍽️)

Think of a browser like a restaurant.

┌─────────────────────────────────────────┐
│         USER INTERFACE                   │
│  (Dining Area - What You See)            │
│  - Address bar, tabs, buttons            │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│         BROWSER ENGINE                   │
│  (Manager - Coordinates Everything)      │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│         RENDERING ENGINE                 │
│  (Chef - Creates the Visual Output)      │
│  - Parses HTML/CSS                       │
│  - Builds DOM & CSSOM                    │
│  - Renders the page                      │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│         NETWORKING LAYER                 │
│  (Delivery Service - Gets Files)         │
│  - HTTP requests                         │
│  - Downloads resources                   │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│         JAVASCRIPT ENGINE                │
│  (Waiter - Adds Interaction)             │
│  - Executes JS                           │
│  - Handles interactivity                 │
└─────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Each part has a specific job. Let’s understand them one by one.

1. User Interface (UI)

This is the part you interact with:

  • Address bar
  • Tabs
  • Back/Forward buttons
  • Bookmarks
  • Settings

This is just the “face” of the browser.

Like steering wheel of a car.
You control it, but the engine is inside.

2. Browser Engine vs Rendering Engine (This Confuses Everyone)

Browser Engine → The Manager

  • Coordinates everything
  • Controls communication between parts
  • Decides what to do next

Rendering Engine → The Artist

  • Parses HTML & CSS
  • Builds structures
  • Paints pixels on screen

Some real rendering engines used today:

  • Blink (Chrome, Edge, Opera)
  • Gecko (Firefox)
  • WebKit (Safari)

The browser engine manages everything, but rendering engine does the visual heavy work.

3. Networking — How Files Are Fetched

Now let’s walk through what happens when you type a URL.

You type:

https://chaicode.com
Enter fullscreen mode Exit fullscreen mode

Here’s what happens:

Step 1: Break URL
Protocol → https
Domain   → chaicode.com
Path     → /
Enter fullscreen mode Exit fullscreen mode

Step 2: DNS Lookup

Your browser asks:

“What is the IP address of chaicode.com?”

DNS replies:

93.184.216.34
Enter fullscreen mode Exit fullscreen mode

Now browser knows where to go.

Step 3: HTTP Request

Browser sends request to that IP:

“Please send me the HTML file.”

Server responds with HTML.

But HTML isn’t the only thing needed.

Inside HTML, browser finds:

  • CSS files
  • JavaScript files
  • Images
  • Fonts

Then it downloads all of them in parallel (simultaneously).

That’s why modern websites load fast.

4. HTML Parsing & DOM Creation

Now browser has HTML.

Example:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Hello world!</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Browser does something called parsing.

What is Parsing?

Parsing means breaking text into meaningful structure.

Like reading a math expression:

2 + 3 * 4
Enter fullscreen mode Exit fullscreen mode

It builds a tree:

        +
       / \
      2   *
         / \
        3   4
Enter fullscreen mode Exit fullscreen mode

HTML works same way.

Browser builds a tree:

        html
       /    \
    head    body
     |      /  \
   title   h1   p
     |      |    |
  "My Page" "Welcome" "Hello world!"
Enter fullscreen mode Exit fullscreen mode

This tree is called:

🌳 DOM (Document Object Model)

Every HTML element becomes a node.

Why DOM matters?

  • JavaScript uses it
  • Browser uses it
  • Changes in DOM update the screen

Without DOM, nothing works.

5. CSS Parsing & CSSOM Creation

At the same time, browser parses CSS.

Example:

body {
  font-size: 16px;
  color: black;
}

h1 {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Browser builds another tree called:

CSSOM (CSS Object Model) 

        StyleSheet
             │
      ┌──────┴──────┐
      │             │
    body{}         h1{}
      │             │
  font-size       color
  color
Enter fullscreen mode Exit fullscreen mode

Important thing:

Browser cannot render until CSSOM is ready
Because styles affect layout.

6. DOM + CSSOM = Render Tree

Now browser combines both trees.

DOM Tree        CSSOM Tree
    │                │
    └──── Combine ───┘
             ↓
         Render Tree
Enter fullscreen mode Exit fullscreen mode

Render Tree contains:

  • Only visible elements
  • With computed styles attached

Not included:

  • <head>
  • <script>
  • Hidden elements

Render Tree is basically blueprint of what will be shown.

7. Layout (Reflow)

Now browser calculates positions.

Questions browser asks:

  • How wide is this element?
  • Where should it go?
  • How much space does it need?
  • Does it wrap to next line?

Example:

Before Layout:

Header
Nav   Main
Footer
Enter fullscreen mode Exit fullscreen mode

After Layout:

┌─────────────────┐
│ Header (100%)   │
├─────────────────┤
│ Nav │ Main      │
├─────────────────┤
│ Footer (100%)   │
└─────────────────┘
Enter fullscreen mode Exit fullscreen mode

Now browser knows exact pixel positions.

8. Painting

Layout tells where to draw.

CSS tells what to draw.

Painting fills in pixels:

  • Background colors
  • Borders
  • Text
  • Images
  • Shadows

Think like paint-by-numbers.

Layers:

  1. Background
  2. Borders
  3. Text
  4. Images
  5. Overlays

9. Display

Finally:

Render Tree
   ↓
Layout
   ↓
Paint
   ↓
Graphics Card
   ↓
Monitor
   ↓
Your Eyes 👀
Enter fullscreen mode Exit fullscreen mode

And you see the webpage.

All of this usually happens in less than a second.

Crazy right?

Complete Flow (From URL to Pixels) 

1. You type URL
        ↓
2. DNS lookup
        ↓
3. HTTP request
        ↓
4. Receive HTML
        ↓
5. Download CSS/JS/Images
        ↓
6. Build DOM
        ↓
7. Build CSSOM
        ↓
8. Create Render Tree
        ↓
9. Layout (Reflow)
        ↓
10. Paint
        ↓
11. Display on screen
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

Next time you open a website, just remember:

Your browser didn’t “just open it”.

It:

  • Talked to servers
  • Downloaded multiple files
  • Built tree structures
  • Calculated layouts
  • Painted millions of pixels
  • Coordinated multiple engines
  • And then showed you result

All in milliseconds.

Sometimes we think frontend is just HTML & CSS.

But honestly, the browser is doing so much heavy lifting behind the scenes and we dont even realise it properly.

once you understand this flow deeply, performance optimization and debugging becomes way more logical.

Happy Learning..

Top comments (0)