How browser works

What Really Happens When You Type `blog.prakashtsx.me` in Your Browser?

From URL → code → pixels (explained visually for beginners)

A Simple Question to Start With

You open your browser, type:

blog.prakashtsx.me

…and press Enter.

Within milliseconds, blog appears.

But what actually happened inside the browser during that tiny moment?

Let’s Understand :

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

A browser is not just a website opener.

When you visit blog.prakashtsx.me, your browser becomes:

A network client (talks to servers)
A file downloader (HTML, CSS, JS)
A parser (understands code)
A layout planner
A painter (draws pixels)

In simple words:

A browser converts text files into a visual experience.

Main Parts of a Browser (High-Level Overview)

Think of the browser as a team of components working together.

Main components:

User Interface
Browser Engine
Rendering Engine
Networking
JavaScript Engine
Data Storage

User Interface (What You See)

This is the visible part of the browser:

Address bar (where you type blog.prakashtsx.me)
Tabs
Back / Forward buttons
Refresh button

Important:
The UI does not render the website.
It only sends instructions to the browser engine.

Browser Engine vs Rendering Engine (Simple Difference)

This confuses many beginners, so let’s simplify.

Browser Engine

Acts like a manager
Connects UI with the rendering engine
Controls page loading

Rendering Engine

Converts HTML + CSS into pixels
Builds DOM, CSSOM, Render Tree

Examples (name-level only):

Chrome → Blink
Firefox → Gecko

One manages. One draws.

Networking: How `blog.prakashtsx.me` Is Fetched

After pressing Enter:

Browser reads the URL
DNS converts domain → IP address
Browser sends an HTTP/HTTPS request
Server responds with:
- HTML
- CSS
- JavaScript
- Images, fonts

At this stage, the browser has raw files, not a page.

HTML Parsing → DOM Creation

Let’s say blog sends HTML like:

<html>
  <body>
    <div>Hello from blog.prakashtsx.me</div>
  </body>
</html>

The browser:

Reads HTML line by line
Breaks it into tokens
Builds a tree structure

This tree is called the DOM (Document Object Model).

DOM Analogy

Think of DOM as a family tree:

html → parent
body → child
div → grandchild

CSS Parsing → CSSOM Creation

CSS is processed separately.

Example:
```
  body { font-size: 16px; }
  div { color: blue; }
```
The browser:
- Tokenizes CSS
- Applies rules
- Handles inheritance

This creates the CSSOM (CSS Object Model).

How DOM and CSSOM Come Together

Now the browser combines:

DOM (structure)
CSSOM (styles)

To form the Render Tree.

Render Tree:

Contains only visible elements
Includes layout + style info

Elements like display: none are excluded.

Layout (Reflow): Deciding Positions

Now the browser calculates:

Width
Height
Position (x, y)

This step is called Layout or Reflow*.*

Reflow happens again if:

Window resizes
Content changes
Font size changes

Painting and Display

Painting

The browser paints:

Text
Colors
Borders
Images

Compositing & Display

Layers are combined
Pixels are pushed to the screen

🎉 You now see blog.prakashtsx.me

What Does “Parsing” Mean?

Parsing means:

Breaking something into meaningful structure

Example:

    2 + 3 * 4

Parser understands:

* has higher priority
Builds a tree
Evaluates correctly

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

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

What Really Happens When You Type `blog.prakashtsx.me` in Your Browser?

A Simple Question to Start With

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