How Browsers Work?

How Browsers Work?

Ever wondered how these web browsers like Google Chrome, Firefox or Internet Explorer work? How they deliver the web pages of a site when we hit the address? And how it works internally? Well, it involves a lot of things, let me explain in simple ways.

So, When we open a browser and hit an address, let's say www.google.com, through the Internet the browser tries to reach the IP address of a server by translating the domain name and then the server delivers all the required resources for the website.

A website is a collection of web pages, documents and multi-media files that are hosted on a server on the Internet. A web page is an HTML document, which in association with stylesheets(CSS) and scripts(JS) renders the contents of a website. So in short, a website is a bundle of HTML, CSS, and JS files.

HTML: An HTML(Hypertext Markup Language) document describes the layout, format and content of a page. The Web browser renders the page according to the HTML structure.

CSS: A CSS(Cascading Style Sheet) defines the look of a website, the styling part.

JS: And finally JS(Javascript) gives a multitude of functionalities to the website, the functionality part.

Okay, so these components contribute to the Front-End part. But, what's the inside story? How the browser works with all these files?


So here are different components of a Browser:

• Networking:

This part is responsible for all the request and response handling through which a browser fetches different files and content or data. It involves various implementations for different platform. 

• The rendering engine: 

This part is responsible for displaying requested content in the viewport. It parses the HTML document and renders the UI skeleton like where the header part should come or footer, or giving proportions to the elements defined in the page, defining styles etc.

• The user interface:

The UI is the interface that browser provides to the user to achieve different functionalities like buttons to go back or forward in the history, to bookmark certain pages as you like, search boxes to type an URL or search something over the internet. You can even add different plugins to perform a specific task in the browser.

• The browser engine:

Browser engine is a communicator between the rendering engine and user interface. whatever action a user chooses, browser engine controls the corresponding rendering of layout or performing a task or making a network call etc.

• UI backend: 

UI backend holds access to the background Operating System for a different set of actions like saving a file to the computer, uploading or downloading to the local machine, providing a temporary location port or dealing with caches.

• JavaScript interpreter: 

Javascript interpreter gives life to the functionality of a web page. A JS file defines a task e.g. if there is a form in a web site and we fill it and provide inputs, and submit. Now, where it should go, what validations the inputs should have, showing us the response out of it etc. can be done through JS. Various javascript files can manage a hell lot of functionalities and their codes can be written in different formats or language. But how the operating system would understand it. Hence the JS interpreter of the browser decode those to machine language and through that browser performs a task.

• Data storage:

The browser also provides a couple of features for data storage. It may be through web storage(local storage and session storage), web sql, indexedDB, cookies etc. This storage is accessible to the webpages that can set and get data out of it. 

Okay, so now you got to know about different components. Let's see how they interact in simple words. 

When a web page and associated contents are fetched from a server to the browser, the browser checks for the HTML templates first. It parses the code and creates a structure(DOM- Document Object Model). Then comes rendering of elements and creates a render tree. Element by element it traverses all the component and defines the layout, width, height, alignment etc. Then it stylizes the elements through css. 

[ Note: If you have worked on jQuery or plain javascript, then you must be aware of document.ready and window.onload. Do you know which is called first? The answer is document.ready. because the DOM is loaded first then comes the content. And after all the content are properly loaded then window.onload is called. ]

So, This is how a browser works!! :D
We have tried to explain in simple words. Let's know if you have any queries or feedback.

Happy Exploring!!