Working of Browser

“What happens after I type a URL and press Enter?”

We use browser almost every day like we open chrome and type URL then enters and website opens.

But what happens between pressing enter and seeing pixel on screen ?

When we type something like https:// chaicode.com and press enter then following process occur:

• Fetch website files from the internet

• Understand (parse) HTML and CSS

• Build internal structures (DOM & CSSOM)

• Combine them to figure out what goes where

• Draw pixels on your screen

What is Browser?

Browser is the server that:

• talk to server

• Downloading files like html, CSS , JavaScript, images

• Understanding files

• Convert this into pixels

• Show on screen

• Handle user’s interaction like click, rolling,.. etc.

High level parts of Browser

1. User interface(UI)

when you enter in a website:

• click button

• submit button

• forward/ backward arrows

• login

• refresh button

• text

• input boxes

• icons

It’s all because of UI.

Simply, UI means everything that user see and interact which in screen.

2.Browser Engine

It is bridge Between UI and rendering engine.

It tell to rendering engine what to load and when to update screen.

3. Rendering Engine

This is the heart of the browser

Its work is :

• Parse HTML

• Parse CSS

• Create visual structure

• Layout elements

• Paint pixels

4. Networking Layer

Responsible for:

• Making HTTP/HTTPS requests

• Downloading HTML, CSS, JS, images

Basically: “Go to the internet and bring the files.”

5. JavaScript Engine

It can:

• Change HTML

• Change CSS

• React to clicks and events

Browser vs Rendering Engine

• Browser Engine → Manager

• Rendering Engine → Builder & Painter

The browser engine decides what needs to be done.
The rendering engine actually builds and draws the page.

Networking: How the Browser Fetches Files

Once you press Enter:

1. Browser sends a request to the server

2. Server responds with:

   • HTML file

   • CSS files

   • JavaScript files

   • Images, fonts, etc.

Now the browser has raw files, but it still doesn’t know how the page should look.

That’s where parsing begins.

HTML Parsing and DOM Creation

HTML is parsed, not just read.

What is Parsing?

Breaking something into pieces and understanding its structure

DOM (Document Object Model)

When HTML is parsed, the browser creates a DOM tree. DOM represents structure and content.

CSS Parsing and CSSOM Creation

CSS is parsed separately.

CSSOM (CSS Object Model):

It represents Style, Rules, selectors.

CSSOM knows Which elements get which styles

CSSOM represents how things should look.

How DOM and CSSOM Come Together

DOM = What exists
CSSOM = How it should look

The browser combines them to create the Render Tree.

Render Tree contains:

• Only visible elements

• With final styles applied

Hidden elements are excluded.

Layout (Reflow): Deciding Positions

Now the browser asks How wide?, How tall?, Where exactly on the screen?.

This step is called Layout.

It calculates position, sizes, spacing.

Painting: Turning Layout into Pixels

The browser:

• Fills colors

• Draws text

• Adds borders, shadows, images

Display

Pixels appear on your screen.

Full Flow: URL to Pixels

1. Type URL & press Enter

2. Networking fetches files

3. HTML → DOM

4. CSS → CSSOM

5. DOM + CSSOM → Render Tree

6. Layout also called as reflow.

7. Paint

8. Display on screen

Conclusion

The server provides data and logic, while the browser handles frontend work by parsing code and rendering it into visible UI on the screen.

I hope that you’ve found this blog helpful...! If you have any questions or feedback, feel free to leave a comment below.

If you found this article helpful, please like and share it .