Source: Dev.to

Introduction: A Simple Action, a Complex Story

You type a URL.
You press Enter.
A webpage appears.

It feels instant—effortless. Nothing special, right?

But under the hood that single key‑press triggers a carefully coordinated chain of events involving networking, parsing, layout calculations, and rendering logic—all happening in milliseconds (or less).

Most beginners assume a browser’s job is simple: “It opens websites.”
That’s not wrong, but it’s wildly incomplete.

A browser is not just a viewer. It’s a system—almost an operating system in its own right. It fetches files, understands languages like HTML and CSS, converts text into structured data, calculates layouts, and finally paints pixels onto your screen.

In this guide we’ll slow down that moment.
We won’t dive into specifications or try to memorize components.
Instead we’ll follow a story—from typing a URL to seeing the pixels.

When you press Enter, the browser doesn’t jump straight to drawing the page.
It follows a pipeline—a sequence of steps where each stage prepares data for the next.

By the end, browsers will feel less like magic and more like well‑designed machines doing exactly what they’re supposed to do.

---

What Is a Browser, Really?

At a high level, a browser is a platform that performs four core jobs:

1. Provides a user interface (tabs, address bar, buttons).
2. Fetches resources from the network.
3. Understands web languages (HTML, CSS, JavaScript).
4. Converts those instructions into pixels on your screen.

Think of a browser like a restaurant:

Key takeaway:
A browser is not a single program; it is a collection of cooperating components that translate HTML (and friends) into visual data.

---

Main Parts of a Browser

Below are the major players inside a modern browser.

1. User Interface (UI)

Everything you see except the page rendering area belongs to the UI: address bar, tabs, refresh button, back/forward buttons, etc.

• The UI does not render websites.
• It simply accepts your input and hands the work off to other components.
• When you type a URL and press Enter, the UI says: “Here’s the request. Handle it.”

2. Browser Engine

Often called the brain of the browser, the engine coordinates:

• Navigation (back, forward, reload).
• Communication between the UI layer and storage subsystems.
• Session management (state across tabs, history, etc.).

Examples of browser engines:

• Trident (Internet Explorer, early Edge)
• Blink (Chrome, Opera, Brave)
• WebKit (Safari)
• Gecko (Firefox)

3. Rendering Engine

The rendering engine turns HTML/CSS into something visible. Its heavy‑lifting tasks include:

• Parsing HTML → DOM (Document Object Model).
• Parsing CSS → CSSOM (CSS Object Model).
• Building the render tree.
• Performing layout (reflow) and painting.

It listens to commands from the browser engine (e.g., reload, refresh).

4. Networking Layer

When the browser engine receives a URL, it asks the networking layer to fetch resources. Responsibilities:

• DNS resolution.
• Establishing TCP/TLS handshakes.
• Sending HTTP/HTTPS requests.

Typical resources fetched:

• HTML documents
• CSS stylesheets
• JavaScript files
• Images, fonts, videos, etc.

At this stage the browser is merely collecting raw materials; it doesn’t yet know how they will look.

5. JavaScript Engine (JS Interpreter)

The JavaScript engine parses, compiles, and executes JavaScript code. Popular engines:

• V8 (Chrome, Node.js)
• SpiderMonkey (Firefox)
• JavaScriptCore (Safari, Bun)
• Chakra (legacy Edge)

6. UI Backend (Graphics Layer)

The UI backend actually draws pixels on the screen. The rendering engine produces layout and paint instructions, which the UI backend turns into raster images that the operating system displays.

7. Storage / Disk API

Provides persistent storage for:

• Browser cache
• Cookies
• localStorage / sessionStorage
• IndexedDB, etc.

It writes data to the browser’s profile folder on disk using internal methods.

---

Overview Diagram

Figure: High‑level view of browser components and their responsibilities.

---

How a Browser Actually Works

Let’s deep‑dive into the journey from typing a URL to seeing pixels.

1. User input – You press Enter in the address bar.
2. Browser engine → Networking – The engine tells the networking layer to resolve the domain name (DNS).
3. DNS resolution – The networking layer obtains the server’s IP address.
4. Connection handshake – A TCP (and optionally TLS) connection is established.
5. HTTP request – The networking layer sends an HTTP/HTTPS request for the HTML document.
6. Data arrival – As the first bytes arrive, they are streamed to the rendering engine.
7. HTML parsing – The rendering engine tokenizes the HTML, builds the DOM, and begins constructing the render tree.
8. CSS fetching & parsing – While parsing HTML, the engine discovers and tags, asks the networking layer for CSS files, parses them into the CSSOM, and merges it with the DOM.
9. JavaScript execution – Encountered “ tags trigger the JavaScript engine, which may modify the DOM/CSSOM, causing further layout work.
10. Layout (reflow) – With a complete render tree, the engine computes the geometry of every node.
11. Painting – The engine turns layout information into drawing commands (layers, textures).
12. UI backend – These commands are handed to the graphics layer, which rasterizes them and updates the screen.

The result: the page you see.

---

Quick Recap

---

Further Reading

• “How Browsers Work” – A detailed series by Tali Garsiel & Paul Irish.
• MDN Web Docs – Excellent reference for each browser subsystem.
• “Browser Architecture” – Talks and articles on modern engine design (Blink, Gecko, WebKit).

---

Now you have a clearer picture of the invisible machinery that turns a simple URL into a fully rendered webpage.

[![HTML Parsing Diagram](https://media2.dev.to/dynamic/image/width=800,height=&fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffas2fanc5chbrn7j2ybr.png)](https://media2.dev.to/dynamic/image/width=800,height=&fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffas2fanc5chbrn7j2ybr.png)

## HTML Parsing: From Text to DOM

HTML arrives as plain text.  
The browser doesn’t see “headings” or “sections” yet — it sees characters.

So it parses the HTML:

- Reads it token by token  
- Understands tags and nesting  

It then builds a structured representation called the **DOM**.

### What Is the DOM?

The **Document Object Model (DOM)** is a tree‑like structure where:

- Each HTML element becomes a node  
- Parent‑child relationships are preserved  

Think of the DOM as a family tree of elements.

[![DOM Tree](https://media2.dev.to/dynamic/image/width=800,height=&fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu119z1ucsmv4ae068r3q.gif)](https://media2.dev.to/dynamic/image/width=800,height=&fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu119z1ucsmv4ae068r3q.gif)

---

## CSS Parsing: From Styles to CSSOM

CSS also starts as text.  
The browser parses CSS into another structure called the **CSSOM (CSS Object Model)**.

This structure stores:

- Selectors  
- Properties  
- Values  
- Cascading and inheritance rules  

**Important note:**  
The CSSOM doesn’t decide positions — it only defines how things should look.

[![CSSOM Diagram](https://media2.dev.to/dynamic/image/width=800,height=&fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F17bara5hdmlvc7gy36nc.png)](https://media2.dev.to/dynamic/image/width=800,height=&fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F17bara5hdmlvc7gy36nc.png)