DEV Community

Cover image for How a Browser Works
Mohd Asif Ansari
Mohd Asif Ansari

Posted on

How a Browser Works

#webdev #browser #beginners #tutorial

You type "google.com" in your browser and press Enter. A webpage appears. But what actually happened in those few seconds?

Let's peek behind the curtain and see how browsers work.

What is a Browser, Really?

A browser is more than just "something that opens websites."

Simple definition: A browser is a software that fetches web content, understands it, and displays it as a visual page.

Think of it as: A translator that takes code (HTML, CSS, JavaScript) and turns it into the webpage you see.

Popular browsers: Chrome, Firefox, Safari, Edge

The Big Question

What happens when you type a URL and press Enter?

Let's break it down step by step.

Main Parts of a Browser

A browser has several components working together:

User Interface (what you see and interact with)
    ↓
Browser Engine (coordinates everything)
    ↓
Rendering Engine (turns code into visuals)
    ↓
Networking (fetches resources from internet)
    ↓
JavaScript Engine (runs JS code)
    ↓
Data Storage (cookies, cache, etc.)
Enter fullscreen mode Exit fullscreen mode

Let's understand each part.

1. User Interface (UI)

This is everything you see and click:

  • Address bar (where you type URLs)
  • Back/Forward buttons
  • Refresh button
  • Bookmarks bar
  • Tabs

Key point: The UI is NOT the webpage itself. It's the browser's controls around the webpage.

2. Browser Engine

The browser engine is like a coordinator. It connects the UI with the rendering engine.

What it does:

  • Takes your input (URL, clicks)
  • Tells the rendering engine what to display
  • Manages the flow between components

Examples:

  • Chrome/Edge use Blink
  • Firefox uses Gecko
  • Safari uses WebKit

You don't need to remember these names. Just know the browser engine coordinates everything.

3. Rendering Engine

The rendering engine is the star of the show. It turns HTML and CSS into what you see.

Main job:

HTML + CSS → Visual Webpage
Enter fullscreen mode Exit fullscreen mode

Popular rendering engines:

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

4. Networking Component

The networking component fetches resources from the internet.

What it fetches:

  • HTML files
  • CSS files
  • JavaScript files
  • Images, videos, fonts

How it works:

  1. You type "google.com"
  2. Networking component sends HTTP request
  3. Server responds with HTML
  4. Browser receives it and passes to rendering engine

The Journey: From URL to Webpage

Now let's trace the complete flow.

Step 1: You Type a URL 

You type: https://example.com
Browser's networking component sends request
Enter fullscreen mode Exit fullscreen mode

Step 2: HTML Arrives

Server responds with HTML:

<html>
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to my page</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 3: Parsing HTML → Creating DOM

The rendering engine parses (reads and understands) the HTML.

What is parsing? Breaking something complex into understandable parts.

Simple example:

Sentence: "The cat sat on the mat"
Parsing breaks it into:
- Subject: The cat
- Verb: sat
- Where: on the mat
Enter fullscreen mode Exit fullscreen mode

For HTML:

<body>
  <h1>Hello</h1>
  <p>World</p>
</body>
Enter fullscreen mode Exit fullscreen mode

Becomes a DOM (Document Object Model) tree:

body
 ├── h1 ("Hello")
 └── p ("World")
Enter fullscreen mode Exit fullscreen mode

DOM = Tree structure representing the HTML

Step 4: CSS Arrives and Gets Parsed

Browser sees <link rel="stylesheet" href="style.css"> and fetches the CSS file:

h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: gray;
}
Enter fullscreen mode Exit fullscreen mode

This gets parsed into CSSOM (CSS Object Model):

h1: color=blue, font-size=24px
p: color=gray
Enter fullscreen mode Exit fullscreen mode

CSSOM = Tree structure representing CSS rules

Step 5: Combining DOM and CSSOM

Browser combines DOM and CSSOM to create the Render Tree.

Render Tree = What actually needs to be displayed

Render Tree:
body
 ├── h1 ("Hello") - blue, 24px
 └── p ("World") - gray
Enter fullscreen mode Exit fullscreen mode

Note: Only visible elements go in the render tree. Things like <script> or display: none elements are skipped.

Step 6: Layout (Reflow)

Now the browser calculates where everything goes on the screen.

Layout (Reflow) = Calculating position and size of each element

h1: starts at (0, 0), width: 100%, height: 30px
p: starts at (0, 30), width: 100%, height: 20px
Enter fullscreen mode Exit fullscreen mode

This is like measuring where furniture goes in a room before placing it.

Step 7: Painting

Painting = Actually drawing pixels on the screen

The browser paints each element:

  • Draw blue text "Hello" at position (0, 0)
  • Draw gray text "World" at position (0, 30)

Step 8: Display

Finally, the painted content is displayed on your screen. You see the webpage!

Complete Flow Visualized 

1. Type URL
   ↓
2. Fetch HTML (Networking)
   ↓
3. Parse HTML → Create DOM
   ↓
4. Fetch CSS (Networking)
   ↓
5. Parse CSS → Create CSSOM
   ↓
6. Combine DOM + CSSOM → Render Tree
   ↓
7. Layout (Calculate positions)
   ↓
8. Paint (Draw pixels)
   ↓
9. Display on screen
Enter fullscreen mode Exit fullscreen mode

What About JavaScript?

When the browser encounters <script>, it pauses HTML parsing and runs the JavaScript.

JavaScript Engine (like V8 in Chrome) executes the code:

document.querySelector('h1').style.color = 'red';
Enter fullscreen mode Exit fullscreen mode

This modifies the DOM, which triggers:

  • Render tree update
  • Layout recalculation
  • Repaint

That's why heavy JavaScript can slow down page loading.

Simple Parsing Example

Let's understand parsing with a math expression:

Input: 3 + 4 * 2

Parsing breaks it into a tree:

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

Why? The browser needs to understand the structure before calculating (multiplication first, then addition).

Similarly, HTML like <div><p>Text</p></div> becomes:

div
 └── p
      └── "Text"
Enter fullscreen mode Exit fullscreen mode

Parsing = Understanding structure

Browser Architecture Summary 

┌─────────────────────────────────────┐
│       User Interface (UI)           │
│  (Address bar, buttons, tabs)       │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│       Browser Engine                │
│  (Coordinates components)           │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│       Rendering Engine              │
│  (HTML/CSS → Visual page)           │
└─────────────────────────────────────┘
       ↓              ↓
┌─────────────┐  ┌──────────────────┐
│ Networking  │  │ JavaScript Engine│
│ (Fetch data)│  │ (Run JS code)    │
└─────────────┘  └──────────────────┘
       ↓
┌─────────────────────────────────────┐
│       Data Storage                  │
│  (Cookies, cache, localStorage)     │
└─────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

What a browser does:

  1. Fetches HTML, CSS, JS from server
  2. Parses HTML → Creates DOM
  3. Parses CSS → Creates CSSOM
  4. Combines them → Render Tree
  5. Calculates layout (where things go)
  6. Paints (draws on screen)
  7. Displays the webpage

Important terms:

  • DOM = Tree of HTML elements
  • CSSOM = Tree of CSS rules
  • Render Tree = What to display
  • Layout = Where to place things
  • Paint = Actually drawing pixels
  • Parsing = Understanding structure

Remember: You don't need to memorize all this. Just understand the flow: fetch → parse → render → display.

Why This Matters for Developers

Understanding browser internals helps you:

Write faster websites - Minimize DOM changes, optimize CSS

Debug issues - Know why things are slow or look broken

Optimize performance - Reduce reflows and repaints

Interviews - Common question in frontend interviews

Next time you load a webpage, you'll know all the magic happening behind the scenes!

Top comments (0)