How Browser Renders a Webpage

A web browser is often the software of choice for various users looking to transverse or retrieve information on the world wide web. It allows the storage of the data in a presenting system and uses it as necessary. But how does this essential software track down the address, or more formally the "Uniform Resource Identifier (URI)" and load files from a remote server and look at it?

It Starts with the browser engine.

Within the browser is a piece of software called a browser engine. It works out what the user needs to see based on the files it receives. Every major browser has one, and every browser maker calls them something different; for example, the browser engine of 'Google's Chrome is called Blink, and that of 'Apple's Safari is called Webkit.

Let's get a few terms straight.

Before understanding how browsers contribute to a website, let us familiarise ourselves with a few terms that come up in every conversation related to a browser.

1.Networking

The networking block usually uses HTTP all over the internet. It simply receives everything.

2.  Javascript Interpreter

While developing a webpage, you will come across tons of script that us running continuously on a web browser. Javascript Interpreter is a speedy way to interpret these scripts and execute them efficiently.

3. UI Backend

It is the place where you create the content you want to display to the user. It does the real drawing. You tell the UI that you want to show a rectangle, and you will see a rectangle on your screen.

4. Data Layer

We have a data layer on the browsers because they also save a lot of information. Every time a user goes to a website, logs in and clicks that remember me option, a small amount of data is saved on their browser. These little bits of data are called cookies. The browser also collects random data like your search history, which you delete often. Apart from that, there is always a set of data that the browser keeps for itself.

The process. How does a browser contribute to a webpage?

The process of formation of a webpage

Step 1: Resource gathering:

The first thing that a browser does is use its networking module to gather different resources to show them to the user. These might be CSS files, HTML files, pictures and various other things.

Step 2: Parse HTML and Create a DOM tree:

While working with HTML, one may find themselves working with a tree-like structure, which is formed due to various tags. Each tag has more sub-tags as its branches which in together form the tree-like structure. This structure consists of the Document Object Model( DOM) elements. The advantage of this step is that since HTML is flexible, so is the parsing, leading to the developer using anti-pattern HTML often. Hence, even if a tag is missing, it does not lead to the complete breakdown of the whole page. There is a lot of error checking done inside the parsing, which lets the browser be flexible about the errors made by developers. To summarise, all the data gathered by the networking module is collected, and a tree structure of DOM objects is created.

Step 3: Create a Render Tree from DOM Tree:

The next step consists of adding some flair to the tree structure we have created. Not only do we have the downloaded HTML but also the downloaded CSS that defines tons of different styling attributes for all the elements inside our tree. The significant purpose here is to take all those styles and apply them to the right items in our tree. The fascinating thing that happens during this step of translating the DOM tree to render tree is that the render tree only contains elements that you can see. One ubiquitous attribute of HTML is setting its display to hidden so that you can hide tags. When you say, something is hidden it's going actually to exist in the DOM tree but not going to be translated into the render tree because the code is knowing about the hidden nature of it. The final output consists of all the different elements which have been translated and were not hidden.

Step 4: Layout:

During the layout step, everything is either in the format of a box, a square or a rectangle. There are a couple of ways to describe a box. You can give it four separate points, or else you can give it one point with dimensions. The above step put all the styling into one render tree, while the layout step decides the exact position and where they go on the screen.

Step 5: Painting:

In this step, all the information is gathered and send over to UI back-end actually to draw on the screen. The core UI goes all the way to the operating system or to the graphics library and use draw functions to get things on the screen. Another thing that the UI does is handle the z dimension. During layout, everything is laid out on the XY plane, but the Z plane also needs to be considered. Imagine having two boxes which take the same amount of space, but one box is over the other. The UI engine needs to be smart enough to identify which box is above and which is below.

These are the necessary steps of how the rendering process takes place. The main reason behind the complication of this process is the DOM model being in a tree-like structure. Also, one may find that there is a constant change in the tree structure.

When the user presses a button on the webpage, it executes a script that changes the tree structure. The web browser needs to recognise the change as soon as it is made and re-render everything. This change also happens every time the web-browser is dragged around with a mouse. Due to such hassle, there are teams of people working on each web browser and its every component.

Anant Nema

Anant Nema

Bangalore