DEV Community

Cover image for How a Browser Works A Beginner-Friendly Guide to Browser Internals
Souvik Guha Roy
Souvik Guha Roy

Posted on

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

#browser #programming #webdev #beginners

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
Enter fullscreen mode Exit fullscreen mode

Now let’s walk through what happens when you press Enter.

Networking: Fetching the Website

When you type a URL and hit enter:

  1. The browser first checks cache

  • If the page exists and is valid, it may load instantly.

    1. If not, the browser performs a DNS lookup

  • DNS converts twitter.com into an IP address.

    1. The browser sends an HTTP request to that IP.
    2. 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>
Enter fullscreen mode Exit fullscreen mode

DOM Tree (After Parsing) 

HTML
 └── BODY
      ├── H1
      │    └── "Hello"
      └── P
           └── "Welcome"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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. 🚀

Top comments (0)