Browser and Browser Architecture

Hi, everyone! Welcome to my first blog post! My name is Rohit Nikam and I am working in the IT sector for the last two years. Nowadays technology is at your fingertips due to the internet. You can collect any information within a second. Is it possible without a browser? No, you can't imagine the internet without a browser because it is impossible to use the Internet without a browser. Browser is used in all applications which we use in our day-to-day life. But do you know how this browser works? Don't worry if you are not. I am here to explain how browsers architecture. So let's start without wasting time.

What is a browser?

A browser is application software that is used to explore, retrieve, and display the information available on the World Wide Web. When you request a webpage from a particular website, the browser retrieves its files from the web server and then displayed them on the user's screen. There are so many browsers in the market. Some popular browsers are Google Chrome, Microsoft Edge, Mozilla Firefox, Internet Explorer, Opera, Apple Safari etc.

Now let us discuss browser architecture and it's working.

Components of web browser:

The components of the web browser are shown in the below image.

User Interface: The word user interface itself tells the definition of it. It is an interface using which users can interact with the browser. It includes Address Bar, back button, Bookmarking options, Refresh button, etc.

The browser does not have any fixed mold but it comes from practices of decades and browsers copying each other. If you observe you will understand almost all browsers have some similar features.

Browser Engine: Browser Engine works as a bridge that connects the UI (User Interface) and the rendering engine of the browser.

When you search for any word in the search bar and click on the search button, the browser's UI will tell the browser engine, which will then communicate with the rendering engine.

Rendering Engine: It is responsible for rendering a specific web page requested by the user on their screen. It interprets HTML and XML documents along with images that are styled or formatted using CSS, and a final layout is generated, which is displayed on the user interface.

In the image shown above, the rendering engine starts by getting the contents of the requested document from the networking layer.

It takes HTML and CSS files from the networking layer. It parses the HTML code to create DOM (Document Object Model). The rendering engine will then parse the CSS to build the CSSOM

While the CSS is being parsed and the CSSOM is being created, the browser is downloading other assets through the Network Layer like JavaScript files.

The rendering engine communicates with the JavaScript engine to execute the JavaScript code and manipulate the DOM and CSSOM.

The rendering engine then takes the DOM and the CSSOM and combines them to create the Render tree.

The render tree provides information about all the visible elements to render on the screen. However, the element’s actual size and position are missing from this render tree.

The render tree then goes through the process called layout. Layout means by which the browser goes through each node and determines where on the page it has to be drawn.

And finally creates the visuals on the screen or brightens the pixels exactly how they are meant to be to give the feel of the website like how it was made to be. So then we can say the page is rendered correctly on the screen.

Diffrent website used diffrent rendering engines.Some of the popular browsers and their rendering engines are shown in the below table,

Javascript Interpreter: JavaScript engine translates and executes the JavaScript code, which is included in a website. The translated results are sent to the rendering engine to display results on the device screen. Some popular browsers and their javascript engines are shown in the above table.

Networking: It retrieves the URLs by using internet protocols like HTTP or FTP. It handles all aspects of Internet communication and security. It is also used to cache a retrieved document to reduce network traffic.

UI backend: This layer is responsible for drawing the basic widgets like select or input boxes and windows. Underneath it uses operating system UI methods.

The rendering engine uses the UI backend layer during the layout and painting stages to display the web page on the browser.

Data storage: The data storage is the storage of the browser. This is the small store inside the browser's folder on the computer. It is used by the browser to store all sorts of information locally, like cookies. Modern browsers also support storage mechanisms like localStorage, IndexedDB, and FileSystem.

This is a small article on browser architecture. I hope this article helps you to understand how the Browser architecture.