Web browser architecture :
How does the web browser work ?
Ans : Browser is a software application that communicates with the server (dainik bhaskar , yahoo , google). And finally display the output over the browser.Browser itself can be made in any programming language (May be in c, c++)
Examples of web browser :
a)Chrome
b)Firefox
c)Opera
d)Internet explorer
Note : Today’s browser is totally functional that can interpret
javascript , Css , images , videos , audio , xml
Components of web browser :
User Interface : It is a platform where we interact with the browser. We play with diff parts of browsers.
1)Address bar
2)Back and next buttons
3)Home button
4)refresh
5)bookmark
Browser engine : It is the intermediate between the User Interface and Rendering engine.So, whatever the input we provide on the User Interface layer, accordingly the rendering engine manipulates
Rendering engine : This component of the web browser, is responsible for rendering the requested web page (yahoo, irctc , facebook) over the browser. What the rendering engine renders/interpretes : All the parsing either it is HTML or CSS or XML takes place in parallel
1)HTML parsing uses tokenizing algorithm.
2)Css parsing uses top-down/bottom-up parser algorithm
3)XML
4)Javascript
Javascript interpreter : v8 engine : It converts the javascript back to machine code
Note : Html parser makes DOM. Css parser makes CSSOM
Both above parser makes render tree
Note : Different browsers do have diff rendering engine :
a)Internet explorer : Trident
b)Firefox and other mozilla browsers : Gecko
c)Chrome : Blink
d)Safari + chrome(iphone) : Webkit
Networking
This is the component that actually retrieves the data(css/javascript) from the server. So , to communicate with the server we have to use some protocol
a)Http
b)ftp
Above protocol (http/ftp) used to communicate with the remote server and then download the resources from there
Javascript Interpreter :
This is a browser component. It converts the js code to machine code.Whatever it interpretes , it send it back to rendering engine
a)V8 engine : google
Used in node js and chrome browser also
b)Mozilla Firefox : SpiderMonkey
SpiderMonkey is the first javascripy engine in history
c)Safari : Nitro
d)Internet explorer : Chakra
e)Opera : v8 engine
UI Back end :
This component of the web browser is used for drawing the basic widget
Combo boxes and windows
Data persistence
This is also an imp component of the web browser. It maintains data. It has the storage mechanism like
a)local storage
b)cookies
c)web sql : Internal database for browser
Evernote :
d)File system
Note : It is a very small database that gets created in a local drive where the browser is installed.
Uses : It maintains the user data :
a)cache
b)cookies
c)bookmarks
Summary :
The networking layer actually communicates with the server, and send the data in chunks to the rendering engine
Now, the rendering engine parses the chunks of HTML elements and converts them to the nodes of the dom tree. There again other parser works
Css parser. Finally this DOM tree gets converted into render tree
This render tree are in order in which they get displayed over the browser
After the construction of the render tree , there comes the layout process
The process of calculating the coordinate of different render tree elements, known as layout process
Finally we do have the painting. Finally we paint the diff elements of render tree , back to the browser at diff coordinates as decided at the layout process
Note ♣ : Chrome is the first browser that has multi process architecture. Chrome assigns each tab a different process
