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

1. What a browser actually is

A browser isn’t just “something that opens websites.”
It’s a software application that:

• Talks to servers on the internet

• Downloads website files (HTML, CSS, JavaScript, images, etc.)

• Understands those files

• Converts them into a visual page you can see and interact with

2. Main parts of a browser (high-level)

At a high level, a browser has:

• User Interface – what you see and click

• Browser engine – connects UI with the rendering engine

• Rendering engine – turns HTML/CSS into a page

• Networking – fetches data from the internet

• JavaScript engine – runs JavaScript

• Data storage – cookies, cache, local storage

3. User Interface (UI)

This is the visible part of the browser:

• Address bar (URL bar)

• Tabs

• Back/forward buttons

• Refresh button

• Bookmarks

4. Browser Engine vs Rendering Engine

This part confuses many students, so think like this:

• Browser Engine
  Acts as a middleman between UI and rendering engine.
  Example: when you type a URL, it tells the renderer what to load.

• Rendering Engine
  Does the real work of displaying the page.
  It parses HTML, CSS, and paints pixels on the screen.

5. Networking: fetching HTML, CSS, JS

When you enter a URL:

1. Browser sends an HTTP/HTTPS request

2. Server responds with files:

   • HTML file

   • CSS files

   • JavaScript files

   • Images, fonts, etc.

3. Browser downloads these files

6. HTML parsing and DOM creation

HTML is just text at first.
The browser:

• Reads HTML line by line

• Converts each tag into a node

• Builds a tree structure called the DOM (Document Object Model)

7. CSS parsing and CSSOM creation

CSS is also parsed separately.
The browser:

• Reads all CSS rules

• Understands selectors and styles

• Builds another tree called CSSOM

CSSOM answers questions like:

• What color is this element?

• What font size should it have?

8. How DOM and CSSOM come together

DOM = structure
CSSOM = style

The browser combines them to create the Render Tree.

Render Tree contains:

• Only visible elements

• Each element + its final styles

9. Layout (reflow), painting, and display

Once the render tree is ready:

1. Layout (Reflow)

   • Calculates position and size

   • Example: width, height, margins

2. Painting

   • Fills colors, text, borders, images

3. Display (Compositing)

   • Final pixels are shown on the screen

10. Very basic idea of parsing (simple math example)

Parsing means understanding structure, not just reading text.

Example:

2 + 3 * 4