# Browser working

when we opened a website on browser, what happened behind the scene ??

we only write code, then how the browser loads everything and show the complete webpage to the client.

This all happened through Browser.

## Basics of a Browser :

So let’s try to understand the browser.

*   Basic knowledge of the browser is enough if you don’t want to build your own browser.
    
*   Deep knowledge will help when you want to build your own browser.
    

* * *

## Browser\`s Most Important Part :

The most important part of a browser is the Search URL (where we search everything).

## Browser structure :

Browser seems like this:

![019c056b-ba7e-71d9-8218-b9644164b0d3/1769617660715-019c056d-b082-7b30-abee-dc2936ec5fa8.png](https://messages-prod.27c852f3500f38c1e7786e2c9ff9e48f.r2.cloudflarestorage.com/019c056b-ba7e-71d9-8218-b9644164b0d3/1769617660715-019c056d-b082-7b30-abee-dc2936ec5fa8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=af634fe044bd071ab4c5d356fdace60f%2F20260129%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20260129T065444Z&X-Amz-Expires=3600&X-Amz-Signature=f38d65be8a4405c4f682ac535877954a687ad15190b261cf71b292076a3efa03&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject align="left")

* * *

## User Interface :

*   It is the frontend view of the browser which the user/client see while visiting the browser. It contains UI/UX like search bar, buttons (back, forward, refresh), webpages , tabs , page content.
    

* * *

## Browser Engine :

It manage whole user requests and give instructions to the rendering engine. Think of it like a coordinator who gives instructions , organise and manage them.

*   Browser Engine recieves all the users input.
    
*   It Gives instructions to rendering Engine.
    
*   It gives js code to javascript interpreter.
    
*   It gives network requests to networking.
    

* * *

## Rendoring Engine :

It is the most interesting and magical part of the browser . It is divided into 3 main parts,

*   Networking
    
*   JS interpreter
    
*   UI Backend
    

### **Networking :**

When the user types "chicode.com", the user sees the website but behind the scene

*   Network Engine goes to chaicode server and brings all HTML, CSS and JS files and images.
    
*   It gives the complete code files to Browser Engine.
    

* * *

### JS-Interpreter :

It controls all functions on the website , if the user enter a button on the website then behind the scene

*   JS interpreter loads all the JS files, manages them and update the page quickly infront of the user
    
*   It executes functions and perform specific actions.
    

* * *

### UI Backend :

It is the most important part of the rendering engine. It fatches data from HTML and CSS files, create DOM and CSSOM , and finally create a paints of them and show the user on browser screen. Fist of all it takes HTML and CSS code files by Network Engine.

**HTML DOM Tree :**

*   It converts HTML into DOM like this,
    
    ![](https://messages-prod.27c852f3500f38c1e7786e2c9ff9e48f.r2.cloudflarestorage.com/6c17eb9e-3623-4351-8fdf-ef2a02745e13/1769669554839-019c0885-bc87-75af-9f10-d03b1ac33bee.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=af634fe044bd071ab4c5d356fdace60f%2F20260129%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20260129T065235Z&X-Amz-Expires=3600&X-Amz-Signature=c3a909cce0655b20743f0e1ea88f8255177a328ee9d668b4567a109295bba49a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject align="left")
    
    * * *
    
    ### CSS CSSOM Tree :
    
*   It converts CSS code into CSSOM like this ,
    
    ![](https://messages-prod.27c852f3500f38c1e7786e2c9ff9e48f.r2.cloudflarestorage.com/6c17eb9e-3623-4351-8fdf-ef2a02745e13/1769664795029-019c083c-f7b0-794b-a095-78f59cd8020d.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=af634fe044bd071ab4c5d356fdace60f%2F20260129%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20260129T053315Z&X-Amz-Expires=3600&X-Amz-Signature=95bd6b0f1ed74ecf4c9ecbaff30230871cf2fab8a3443686846bda904b1ad8f2&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject align="left")
    
    * * *
    
    ### Render Tree ( Combine of DOM + CSSOM ):
    
*   After Creating DOM and CSSOM Tree, The UI Backend combines these both and make a Render Tree.
    
    ![](https://messages-prod.27c852f3500f38c1e7786e2c9ff9e48f.r2.cloudflarestorage.com/6c17eb9e-3623-4351-8fdf-ef2a02745e13/1769667790758-019c086a-ea65-7246-8440-b10af98b6506.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=af634fe044bd071ab4c5d356fdace60f%2F20260129%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20260129T062310Z&X-Amz-Expires=3600&X-Amz-Signature=ab48ad81cdae5dffaa21d0b7c71f6bafa98a35b6a5268f843864e7440520a494&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject align="left")
    
    * * *
    
    ### Final Output on The Browser Screen :
    
*   And after Creating Render Tree, It finally make layout and paint it for showing on the screen .
    
    ![](https://messages-prod.27c852f3500f38c1e7786e2c9ff9e48f.r2.cloudflarestorage.com/6c17eb9e-3623-4351-8fdf-ef2a02745e13/1769668718408-019c0879-0810-74ce-bad0-9e0e93ee5e86.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=af634fe044bd071ab4c5d356fdace60f%2F20260129%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20260129T063838Z&X-Amz-Expires=3600&X-Amz-Signature=ab2ecee5f67aed3bffbab1bbeb084fd5a4ce697735de98fcbb4d608eaf522611&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject align="left")
    
    It have a connection directly with User interface because It shows the webpage(paint) .
    

* * *

## Disk API :

It communicate with **Operating System**.

*   It reads Hard drive files and saves cache data/files , it saves permanently
    
*   It store/retrieve user's data.
    
*   It access system resources.
    

* * *

You can find more of my work at [abdulrdeveloper.me](https://abdulrdeveloper.me)  
Read more posts at [blog.abdulrdeveloper.me](https://blog.abdulrdeveloper.me)