Have you ever notice what happens when you type www.twitter.com and hits enter.
Twitter opens right ? But what really happens inside the browser.
In this blog we will discuss :
- What a browser actually is?
- Main parts of a browser (high-level overview)
- User Interface: address bar, tabs, buttons
- Browser Engine vs Rendering Engine (simple distinction)
- Networking: how a browser fetches HTML, CSS, JS
- HTML parsing and DOM creation
- CSS parsing and CSSOM creation
- How DOM and CSSOM come together
- Layout (reflow), painting, and display
- Very basic idea of parsing (using a simple math example)
Browser
The browser is an application software that allows the user to access information from the internet by serving a interface between the user and the server.
Example of some common browser
Google, Safari, Firefox, Opera, Brave, Microsoft
When you search something on these browser
A lot happens in milliseconds behind the scene . The browser goes into a journey to fetch , understand, arrange and finally display the page.
There are some main parts that browser internally worked on to fetch a website for you.
Main parts of a browser
Think of a browser as a team of workers :
1. User Interface (UI): Address bar, back button, tabs, bookmarks. the "First bencher".
2. Browser Engine: The coordinator, tells other part what to do.
3. Rendering Engine: The artist, Turing raw HTML/CSS into visuals.
4. JavaScript Engine: The specialist, It runs the JavaScript code.
5. Networking: The delivery team, fetching files from servers.
6. Data Storage: The storeroom, It stores cache , cookies , local storage of browser
7. Graphics / UI Backend : the teacher, Draws text , images , layout on the screen
Browser flow
UI → Browser Engine → Rendering + JS Engine → Network → Storage → Screen.
Now understand some important part of browser one by one.
User Interface (UI)
It is the part where you interact with the browser , you can do :
Adding tabs, bookmarks
Interacting with back buttons , address bars
This UI does not display the website it self its just for interaction.
Browser Engine vs Rendering Engine
Browser Engine : It connect UI with the rendering engine and control page
Rendering Engine : It does the actual work it converts HTML , CSS into the visual webpage what you actually see on the browser.
Networking
Networking is all about fetching your HTML , CSS and JavaScript
When you press enter :
- First browser checks if the website is in cache if not
- It will go to DNS resolver that return the IP of the website then
- Browser send an HTTP request to the website server
- Server respond with HTML , CSS and JS
If you want to know what DNS is , read 👇
Now we have HTML , CSS and JS lets look how browser break it down.
HTML parsing and DOM creation
Do you know your HTML does break into several parts before displaying it to you.
Browser parse your HTML into DOM ( Document Object model )
DOM is basically a tree that helps the browser to understand the structure of HTML elements
It look like :
<html>
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
</html>
...after parsing
HTML
└── BODY
├── H1
│ └── "Hello"
└── P
└── "Welcome"
Parsing = breaking something into meaningful pieces.
CSS parsing and CSSOM creation
Just like HTML, CSS, also parsed before displaying it to you.
But CSS parsed separately into its parser called CSSOM short for CSS Object Model (CSSOM).
CSSOM defines how element should look : colors , fonts , size etc.
How DOM and CSSOM come together
A quick recap of :
1. DOM : Understand the structure by breaking HTML elements
2. CSSOM : Defines how element should look
Browser combines DOM and CSSOM to build Render tree basically a blue print which is used to draw the webpage on the screen .
After the browser builds the Render Tree, it moves to the next step — Layout, Painting, and Display, where the browser calculates positions, fills colors/text, and finally shows the page on screen.
Layout (Reflow), Painting, and Display
Layout (Reflow): Browser calculates size and position of each element on the page.
Painting: Browser fills pixels — colors, text, images, shadows, borders.
Display (Compositing): Browser puts painted layers together and shows final result on screen.
FLOW
URL typed
↓
DNS lookup + HTTP request
↓
HTML → DOM
CSS → CSSOM
↓
DOM + CSSOM → Render Tree
↓
Layout (Reflow)
↓
Paint
↓
Pixels on screen
Focus on flow, not memorization. The journey matters more than the names.
Thanks for reading ! if enjoyed this blog , you can read more on this 👇
Top comments (0)