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

## What a Browser Really Is

A **web browser** is software that **fetches content from the internet and displays it to you** as interactive web pages. It does much more than just open links — it *processes*, *parses*, *layouts*, and *renders* content like HTML, CSS, and JavaScript to show complete pages. As such, a browser acts as an **HTTP client or user agent** that requests and processes data from servers.

Behind the scenes, a browser is a collection of coordinated components — ranging from the user interface you interact with, to internal engines that interpret and display content.

---

## Main Parts of a Browser (High-Level)

A typical browser consists of the following major parts:

### 1\. **User Interface (UI)**

This is what you see and interact with:

* Address bar
    
* Tabs
    
* Back/forward buttons
    
* Bookmarks
    
* Window controls
    

These are all **UI elements** that make the browser usable, but not involved in actual page processing.

---

### 2\. **Browser/Rendering Engine**

This is the core that turns downloaded content into what you see:

* **Browser engine:** The control center that coordinates between UI and rendering.
    
* **Rendering engine:** Parses HTML and CSS; builds internal structures and renders the page visually. Different browsers use different engines (for example, Chrome uses *Blink*, Firefox uses *Gecko*).
    

---

### 3\. **Networking**

This component handles communication over the internet. When you hit Enter:

1. Browser obtains the URL you typed.
    
2. It resolves the host via DNS and establishes a network connection.
    
3. It sends an appropriate **HTTP request** to the server.
    
4. It receives raw response data — usually HTML, CSS, JavaScript, and assets (images, videos).
    

---

### 4\. **HTML Parsing → DOM**

Once raw bytes of HTML are received, the browser:

* Converts raw bytes into text.
    
* **Parses HTML into tokens and builds a tree structure** called the **Document Object Model (DOM)**.
    
* Each HTML element becomes a node in this tree, representing the structure of the page.
    

---

### 5\. **CSS Parsing → CSSOM**

Separately, CSS files and style blocks are parsed and combined into the **CSS Object Model (CSSOM)** — another tree structure describing how elements should look (styles, selectors, properties).

---

## Combining Structure and Style: Render Tree

After both DOM and CSSOM are ready:

* The browser combines them into a **Render Tree**.
    
* The Render Tree contains only the elements that will actually be **displayed on the page** — invisible elements (like those with `display: none`) are excluded.
    

---

## Layout

With the Render Tree constructed:

* The browser computes **exact sizes, positions, and geometry** for every element.
    
* This step determines *where* everything goes on the screen — it’s called **layout** or **reflow**.
    

---

## Painting and Display

Finally:

* The browser **paints** visual elements — filling in pixels, colors, text, images, borders, shadows, etc.
    
* Depending on the browser’s architecture, this might be done in layers and composed into the final screen output.
    

This entire pipeline — from receiving HTML bytes to displaying pixels — happens *very quickly*, usually in milliseconds.

---

## Parsing Explained

Parsing is similar to understanding a sentence:

* Raw text: `"<h1>Hello</h1>"`
    
* Parser reads characters → recognizes tags → builds a structured representation (DOM tree).
    

This structured interpretation helps the browser know “what’s where” before it lays things out.

---

## Summary: Browser Journey

Here’s the simplified flow from **URL to screen**:

1. **User enters URL** and presses Enter.
    
2. Browser sends a network request and gets HTML, CSS, JS.
    
3. **HTML is parsed** → DOM tree created.
    
4. **CSS is parsed** → CSSOM created.
    
5. **DOM + CSSOM → Render Tree** (visible structure + style).
    
6. **Layout (Reflow)** calculates positions & dimensions.
    
7. **Paint** draws pixels to the screen.