How Browser works?

We all uses web browsers to open websites like Google, face book YouTube everyday but have you wondered how these web browser work.

The basic flow of web browser is we sent a request to the server and server responds with sending the contents to the browser and then browser interprets those contents and display the page.

Now let’s like at the deep structure of the web browsers.

     UI: - user interface is used to interact with user. User interface includes address bar, back or forward button, reload button which is available on the top of the browser screen or any visible content which is used for interaction with user.

      Rendering engine: - the entire browser has a rendering engine which is totally responsible for visual presentation of the webpage or HTML pages. It reads HTML and CSS file or code then interprets that code after interpretation, rendering engine construct the web page on the visual area.

     Browser engine :- one more engine is available on the browser i.e. the browser engine .This engine acts as commander of military who directs or control the functionality and events(action) between the user interface and rendering engine

     Network:- browser need contents or HTML, CSS files to make the page, all the contents are available on server. So browser need to communicate with the network to get those files and images from the server which makes up the page for user. Some time we encounter a situation when some images are missing on the page this means that network failed to fetch that images.

     Programming language: - only HTML, CSS and image files complete the page but these pages are static .they don’t have functionality or any logical operation capacity.

To apply functionality or logical operation capability to page we use a programming or scripting language called JavaScript. But the browser doesn’t know how to handle JavaScript file. This is like a man who know Hindi but trying to read or listen Chinese. We need a translator which helps the browser to communicate with JavaScript; JavaScript interpreter is used to do this job. Different browser have different interpreter for JavaScript.

Some of the JavaScript interpreters are:

CHAKRA:-it is a JavaScript interpreter which is used by Microsoft edge

Spider monkey: - This interpreter is used by Firefox

V8:-  this interpreter is on Google chrome

     Storage: - Browser also has data storage in the form of cookies or local storage. This storage helps in retrieving state of the page when we refresh the page. Cookies are used to remember some information like name.

     Rendering engine display images file like png, jpg or svg but it only renders HTML and CSS code. The entire browser have different rendering engine, this is why we see some difference in the page on different browser.

     Opera or chrome use a rendering engine called blink, safari uses their own engine i.e. webkit and Firefox uses different engine named gecko. These rendering engine have their own method how to render or present  page or information. Firstly rendering engine read all the HTML or CSS code then construct a DOM( document object model) tree and then format the presentation of the page according to DOM.