Browser : Understanding The Working

Introduction :

In this blog we are going to touch the most misunderstood topic in (terms of complexity) by every tech enthusiast, which is a BROWSER.

Most of us in everyday life think that when we type an URL in the address bar of the browser and press ENTER, simply the website we intend to see just opens up on the browser screen. But that’s not how simply it works, and there’s always a big process that takes place while fulfilling the user request.
Following steps take place at the back when we type an URL and press ENTER :

• The browser on getting the URL, contacts the respective server.

• Downloads the files that are received from the server.

• Understands HTML & CSS.

• Builds internal structures.

• Calculates the layout, to display the website as per the user’s screen resolution.

• Draws pixels on the screen.

So from the above all process that takes place within fraction of seconds and might look simple due to less computation time, we understand that it requires a lot of calculations and working at the backend. Thus it can be said that a BROWSER is not just a viewer , it is a MINI OPERATING SYSTEM for the WEB.

What a Browser Actually is ?

In simple words a browser can be understood as a medium which serves the user request by fetching, understanding, organizing the data. The browser is able to do this using multiple engines and subsystems working together at same time.

Main parts of the Browser :

At high level, Browser has 4 main parts in total :

• User Interface

• Browser Engine

• Rendering Engine

• Networking + JS Engine + Storage

Each of the part plays specific and an important role in the working of BROWSER. Lets understand each part in detail.

1. USER INTERFACE (UI) :

   This part of the browser is what the user can see and work upon. It also has its own multiple components which are as follows :

   • Address Bar : To type the URL of the required website

   • Tabs : Different website opened in the browser are shown at the top in form of TABS.

   • Back and Forward Buttons : Buttons which help to navigate between webpages of same website

   • Refresh Button : Used to refresh the whole website.

   • Bookmarks : These are used to save any frequently used websites.

   • Settings : Used to configure the browser settings as per the requirement of the user.

2. BROWSER ENGINE & RENDERING ENGINE :

   • Browser Engine :

     • It acts like a manager who coordinates between the UI and Rendering Engine.

     • It controls the page navigation.

     • Decides when to load or reload the website.

   • Rendering Engine : It is engine where all the computation takes place.

     • It reads the HTML and CSS files.

     • Builds Structure by analyzing the code files.

     • Calculates the layout.

     • And at last Draws the pixels.

Networking — How Browser Fetches the HTML, CSS and JS.

Till now we understood the basic structure and high level working of the WEB BROWSERS. Lets now deep dive into the networking section of the Browser where we will understand how does the Browser work happens between the two points

• First Point : When URL is entered

• Second Point : When The Website is Served to the user on Browser Window.

• The steps that take place between these two main points are as follows :

  1. User enters the URL which is Parsed.

  2. DNS Lookup takes place (The domain name is mapped to the respective IP Address)

  3. Browser then sends the HTTP/HTTPS request to the Server, for fetching the data.

  4. Server in return responds with files like :

     • HTML

     • CSS

     • Java Script

     • Images

  5. Once these files are received, browser immediately starts processing them to show the output.

HTML and CSS Parsing : DOM / CSSOM Creation

Till now we understood that how does the browser works at a higher level, along with which we understood that how does the data from the internet is fetched from the internet and processed by the browser. In the processing part of the files fetched from the internet , we came across the part that the Browser gets the HTML and CSS files which it processes to show the respective output. So in this section we will understand in detail that how and what processing is actually done on HTML and CSS files to display the output.

The process which takes place is mainly known as the Parsing of HTML and CSS Files and then DOM/CSSOM is created for further process to server output.

→ Parsing : It means Breaking the raw data (like text in our case) into meaningful structured pieces. Parsing help the browser understand the file data more effectively.

(More on Parsing at the end of the bog)

• HTML Parsing and DOM Creation :

  1. When the file is received by the browser, it is parsed first, which helps the browser to understand it more meaningfully.

  2. Then at next step the Browser converts it into tree called DOM (Document Object Model)

  3. DOM is a tree structure in simple words. It is simply a family tree of the HTML elements which are present in the HTML Code.

CSS Parsing and DOM Creation :

In similar way as it happened in HTML parsing and DOM creation, here also first the CSS files is parsed to increase it meaning, but here the tree structure formed is called the CSSOM (CSS Object Model) and not DOM.

Combining the DOM and CSSOM : By the Browser

At the end the browser combined the DOM and CSSOM together intro a Render Tree which contains only

• Visible Elements

• Styled Elements

This RENDER TREE is the one which decides that what will actually appear on the screen.

Layout (Reflow), Painting and Display :

Now next part in the working of the browser is the Layout, Painting and Display steps. The working and understanding of the above 3 parts is as follows.

→ LAYOUT (REFLOW) : Once the HTML DOM and CSS CSSOM are combined to Render Tree, this Render Tree is used by the Layout to calculate following things :

• Size of Elements

• Positions

• Spacing

• Flow

  This step of Layout/Reflow decides where each part of the content will be place as per the requirement. For this pixels are calculated by the Browser.

→ Painting : Once the Layout is calculated using the Render Tree, Browser then paints the following elements as per the requirements :

• Text colors

• Backgrounds

• Borders

• Images

• Shadows

After the painting these pixels are then sent to the screen.

→ Display : This is the final step in the process of working of browser. Here the painted pixels received are displayed on the Browser Output Screen.

Basic Idea of Parsing :

→ Parsing : It means Breaking the raw data (like text in our case) into meaningful structured pieces. Parsing help the browser understand the file data more effectively

Parsing can be understood in more detail using the following example.

For example : We have a mathematical expression to be solved using BODMAS rules

→ (1 + 2 * 3)

So this mathematical expression will be parsed into a tree like structure, where its meaning will still remain same, but it will help browser to understand the expression more easily.

The parsed tree for the expression will be as follows :

First as per the rules of BODMAS, multiplication operation of 2 and 3 will take place, giving the result as 6, which will be finally added to 1. And hence the final answer will be 7.

1 + 2 * 3

\= 1 + 6

\=7.

Conclusion :

At the end we have understood that, web browser are not just simple website openers, but they are structure processing systems that fetch, understand, organize and display the web content in a step by step manner.

From parsing HTML into a DOM tree to combining styles through CSSOM and finally rendering pixels, every page we see is the result of multiple coordinated stages.

Understanding the flow of working of browser , makes us realize that a browser is not as simple as we think, and there are lots of processes and steps that take place to display the output requested by the user through the URL.