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

What a browser actually is (beyond “it opens websites”)

A browser is a tool which does a lot of things beyond just opening websites:

• It talks to the server

• Acts as client in client-server architecture

• Handles documents

• Parses HTML and CSS into DOM and CSSOM

• Runs JS using the V8 Engine(embedded)

• Renders UI

• Supports additional functionalities

Main Parts of a Browser (High Level View)

1. User Interface (Bookmarks, buttons, new tab, etc.)

2. Browser Engine (Gecko, Chromium, Web kit, etc.)

3. Rendering Engine (whole lot of stuff goes on here !!!)

4. JS Interpreter (V8 Engine)

5. Dev Tools (different tools for web developers)

6. Disk API (localStorage, sessions, cookies, etc.)

User Interface (address bar, tabs, buttons)

address bar

The address bar is an object which takes a sentence as an input and gives us some result with the help of some Search Engines:

Common search engines:

• Google

• DuckDuckGo

tabs

tabs are the default UI displayed when nothing has been searched or no websites has been open

google page is NOT a tab, it’s the UI displayed by www.google.com

buttons

Buttons are small boxed which offer some functionality when clicked.

home button

It opens the website marked as default (e.g. google)

bookmarks

saves a websites URL in your browser’s bookmarks folder

Did you know? - you can export and import bookmarks from different browsers to one another

Browser Engine VS Rendering Engine

Browser engine denotes the base upon which the browser runs on, like:

• Gecko

• Chromium (most browsers)

• Web kit

Rendering engine is the part of the browser engine which is responsible for rendering UI:

Networking: How a browser fetches HTML, CSS and JS

The browser fetches HTML, CSS and JS from the server response after it makes a request

Parsing

Parsing is how browser interprets the code. It makes a parse tree and calculates accordingly. For example:

HTML Parsing and DOM creation

HTML → HTML Parser → (CSS Parsing and CSSOM creation) → DOM → Content Sink(storage)

CSS Parsing and CSSOM creation

CSS → CSS Parser → CSSOM → Content Sink (Storage)

How DOM and CSSOM come together

This is how browser handles everything.