In this piece, we will look at what goes behind the browser’s window when we search for any website (domain) in the address bar of the browser. Basically, we will try to understand how the browser converts our designed HTML into web pages.
As a developer, while building a web application it is very important to write the code in such a way that it can run smoothly and effortlessly in any browser. Understanding the internals of browsers helps us in making better decisions during development so that the performance and functionality of the application are at optimum levels.
In simple words, we all know a browser is an application which is used to access websites and consequently access information that is available on the internet.
The browser’s primary functionality or task is to display the web resource the user has requested by accessing it from the server and displaying it on the browser’s window.
Here, the web resource is an HTML document which can contain images, PDFs, videos, forms etc.
As of now, there are many browsers which provide us with this functionality and the most popular ones are Chrome, Safari, Firefox, Edge and Internet Explorer.
When you type any URL(Uniform Resource Locator) of any web page in the address bar of your browser, it fetches the document (HTML files containing images, PDF, videos etc.) Â at that URL Â from the web server (where our application code resides), Â interprets it and then renders the content on the browser screen.
Let’s see how this work within the browser with the help of the illustration below:
The browser mainly consists of User Interface, Browser Engine, Rendering Engine, Data Persistence, Networking, JavaScript Interpreter and UI Backend. Below is a hierarchical diagram that shows the different components of a browser.
It is a collection of UI components visible on the browser which are consumed by the user for different reasons.
It includes the address bar, back/forwards navigation button and all other elements that fetch and display the web page requested by the end-user - every part of the browser display, except the window where you see the actually requested web pages.
Each browser has a browser engine under the hood. It works as a bridge between the user interface and the rendering engine. Â It queries and manipulates the rendering engine based on the input it gets from the user interface.
The browser engine decides when what and how HTML tags, images and CSS need to be arranged/rendered. Basically, all that is seen by the user is processed by the browser engine.
The different browser engines that are used in browsers are:
All these engines are written in C++.
It interprets the HTML and XML documents along with the images that are styled or formatted using CSS, and a final layout is generated, which is displayed on the user interface.
In simple words, it parses the HTML and  CSS  to display the parsed content on the screen.
This diagram is for Chrome’s rendering engine and below is a quick description of the flow that is followed for rendering.
The painting order is as follows:
    background-color → background image  →  border →  children → outline
Note: Browsers run multiple instances of the rendering engine - one instance for each tab. Each tab in a browser runs in a separate process.
It is used for making network calls, like Hyper Text Transfer Protocol (HTTP) requests to the server and also handles security for these calls. The web browser communicates with web servers using HTTP. When you click any link on a web page or run a search, it sends an HTTP Request to the server.
JavaScript engine is used to parse and execute the JavaScript code.
Every browser has a JavaScript engine which handles how the end users interact with the graphical element. Different JavaScript engines  are as follows :
The JavaScript engine processes all the interactions of the user with the web page. It executes all the JavaScript code of the document and sends the results to the rendering engine.
It is used for drawing basic widgets like a select box, a check box, an input box etc.
The browser may also need to save the data locally, such as cookies. The browser also supports storage mechanisms such as local storage (limit up to 5mb), Session Storage, Indexed Db, Web SQL and File Systems.
Hope this understanding of the browser will help you build robust applications that are performant, and more usable and take advantage of the ways different processes work internally in a browser.
Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore Zipy for your app, you can sign up here or book a demo here.
‍