Photo by Jonny Caspari on Unsplash

Most of us use browsers every day, but few understand how they actually work under the hood.
Knowing this helps us write more efficient, predictable web applications — and, honestly, it’s just fascinating.

Let’s take a look at what happens when you open a webpage, step by step.

The Browser Is Almost an Operating System

A modern browser isn’t just a window to the web- it’s a small operating system.
It manages memory, processes, file storage, networking, rendering, JavaScript execution, and a user interface layer.

Browser Capabilities

• Networking: Fetch resources over HTTP(S).
• Data storage: Cookies, localStorage, IndexedDB.
• Execution: Run JavaScript securely in a sandboxed environment.
• Rendering: Parse and paint HTML and CSS.
• UI: Manage tabs, buttons, and the visual interface.

Each of these parts works together seamlessly- and it all starts with fetching and parsing data.

Behind the Scenes: Browser Architecture

At a high level, a browser consists of:

• UI Layer: What you interact with- address bar, tabs, etc.
• Data Storage Layer: Where cookies, cache, and site data live.
• Browser Engine: The core that coordinates everything. It’s divided into two main parts:
• Rendering Engine: Parses HTML and CSS, creates the visual output.
• JavaScript Engine: Parses, compiles, and executes JS code.

Examples:

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

The HTML Journey

When you load a webpage, here’s what happens to the HTML file:

1. Get raw bytes from the network.
2. Convert bytes → characters using the correct encoding (e.g., UTF-8).
3. Tokenize the characters into meaningful pieces — e.g.,

   ,

   ,

   .

4. Build objects for each element (with parent/child/sibling relationships).
5. Construct the DOM (Document Object Model) — a live tree structure representing the page.

The DOM isn’t just a static representation- it’s interactive.
JavaScript can modify it, and the browser will update the display accordingly.

Reference: HTML Living Standard

CSS and the Render Tree

CSS follows a similar process:

1. Parse raw bytes → characters → tokens → nodes.
2. Build the CSSOM (CSS Object Model)- representing all style rules.
3. Combine the DOM + CSSOM → Render Tree.
4. The render tree goes through:

• Layout: Calculating sizes and positions.
• Painting: Filling pixels on the screen.

The rendering engine handles this- running complex optimizations to repaint only what’s needed.

Reference: CSSOM Specification

JavaScript: The DOM Manipulator

When the browser encounters a