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:
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,
CSS CSSOM Tree :
It converts CSS code into CSSOM like this ,
Render Tree ( Combine of DOM + CSSOM ):
After Creating DOM and CSSOM Tree, The UI Backend combines these both and make a Render Tree.
Final Output on The Browser Screen :
And after Creating Render Tree, It finally make layout and paint it for showing on the screen .
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.