What is architecture of web browser

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

Site Footer