<![CDATA[How The Browser Works: A Beginners Guide]]>https://how-the-browser-works-a-beginners-guide.hashnode.devRSS for NodeFri, 11 Sep 2026 08:39:04 GMT60<![CDATA[How The Browser Works: A Beginner-Friendly Guide to Browser Internals]]>https://how-the-browser-works-a-beginners-guide.hashnode.dev/how-the-browser-works-a-beginner-friendly-guide-to-browser-internalshttps://how-the-browser-works-a-beginners-guide.hashnode.dev/how-the-browser-works-a-beginner-friendly-guide-to-browser-internalsSun, 01 Feb 2026 12:52:25 GMTWhat actually happens when we type a URL and press Enter?
A webpage appears almost instantly - but behind the scenes, the browser is doing a lot of quiet work.

What a Browser Actually Is (Beyond “It Opens Websites”)

A browser is not just a window or a tool for the internet.
It’s more like a translator + painter.

  • It fetches files from the internet (HTML, CSS, JavaScript)

  • It understands what those files mean

  • It converts code into visuals

  • It keeps updating the screen as things change

In simple words:

A browser’s real job is to turn code into something humans can see and use.

The Main Parts of a Browser (High-Level View)

The components of a browser - DEV Community

We can think of a browser as a small system where each part has some responsibility:

  • User Interface (UI) – what we interact with

  • Browser Engine – coordinates everything

  • Rendering Engine – draws the page

  • Networking – fetches data from servers

  • JavaScript Engine – runs JavaScript

  • Storage – maintain cookies, cache, local storage

User Interface: What We Actually See

This is the part we already know:

  • Address bar

  • Tabs

  • Back / forward buttons

  • Reload button

  • Bookmarks

Important thing to note:
The UI does not build the webpage. It only lets us control the browser.

Browser Engine vs Rendering Engine

A browser engine manages the interaction between the UI and the rendering engine. Working as the overall controller. A rendering engine is a sub-component of the browser engine responsible specifically for parsing HTML/CSS and painting the pixels on the screen.

  • Browser Engine → the manager
    It connects the UI with the rest of the browser and tells components when to work. Handles high-level browser tasks like networking, security, and managing the overall rendering process. For example, in chromium it's the "engine" that houses Blink and V8.

  • Rendering Engine → the artist
    It takes HTML and CSS and turns them into visible content on the screen. Constructs the DOM and CSSOM, calculates layouts (dimensions), and handles painting pixels. For example, Blink(Chrome, Edge, Opera), WebKit (Safari), and Gecko (Firefox).

Networking: How the Browser Fetches Files

When we press Enter:

  1. The browser finds the server using DNS

  2. Sends a request for the webpage

  3. Receives files such as:

    • HTML

    • CSS

    • JavaScript

    • Images

Now the browser has all the raw materials.
Next step: understanding them.

HTML Parsing and DOM Creation

DOM Tree from HTML File

HTML is not used as plain text.

The browser parses HTML and creates the DOM (Document Object Model).

We can think of the DOM as a tree:

  • <html> is the root

  • <body> is a main branch

  • <div>, <p>, <button> are smaller branches

CSS Parsing and CSSOM Creation

Internal CSS parsing structure:

Inside the CSS Engine: CSSOM Explained

CSS is also parsed.

The browser reads CSS rules and builds the CSSOM (CSS Object Model).

If DOM says what exists,
CSSOM says how it should look.

Colors, fonts, spacing, positioning - everything visual comes from here.

How DOM and CSSOM come together

The browser now combines:

  • DOM (structure)

  • CSSOM (style)

This creates the Render Tree.

How web browsers work - the render tree (part 7, with ...

  • Only visible elements are included

  • Each element now knows its style

This is the final blueprint for drawing the page.

Layout (Reflow), Painting, and Display

What are reflows in browser rendering and why should they be ...

Now the browser actually draws the page:

  1. Layout (Reflow)
    Calculates the size and position of each element

  2. Painting
    Draws text, colors, borders, and images

  3. Display (Compositing)
    Combines everything and shows it on the screen

This is where pixels finally appear.

A Very Simple Idea of Parsing

Parsing just means breaking something into structure.

Example:

2 + 3 × 4

We don’t calculate left to right.
We try to understand the structure first.

Browsers do the same with HTML and CSS:

  • Break text into pieces

  • Understand relationships

  • Build trees

Parsing = turning text into meaning.

The Complete View From Starting To End

From Typing URL To Showing the Webpage - by Saurabh Dashora

Type the URL and press Enter

  1. Browser fetches files

  2. HTML → DOM

  3. CSS → CSSOM

  4. DOM + CSSOM → Render Tree

  5. Layout → Paint → Display

That’s the complete journey.

]]>