Introduction

The main functionality of a browser is to present the website you choose, by requesting it from the respective server and displaying it in the browser. In given article, we will discuss the structure and functionality of major browsers, i.e. Chrome, Internet Explorer and Firefox and ultimately conclude how the browser works.

Browser’s high-level structure

A browser’s high-level structure includes the following:

• User Interface: Everything that you can see on a browser, i.e. address bar, buttons, display window, etc.
• Rendering Engine: It parses HTML, XML, CSS, etc.; and displays the content accordingly on the screen.
• Networking: It performs all the network call requests, e.g. HTTP requests.
• JavaScript Interpreter: It parses and executes the JavaScript codes.
• Data storage: Every browser supports persistence layer data storage. It means, you can store your data locally on the browser as cache and it never gets deleted until the browser cache is cleared. We will later utilize this browser feature in our codes too.

How browser works

From the above diagram we can perceive that a browser is a fully-functional software that can interpret the User Interface of a website and its browser engine can render the scripts and networking protocols and also save data locally within the browser.

In simple terms, a browser is a software that divides the whole website into different units, utilizes the DOM architecture of HTML and CSS to display the web-page on screen, and implements the user operation with the help of JavaScript Interpreter and later communicate with the server with the help of its networking unit.