How Browsers load and display web pages

Hi everyone here, in this article I will be talking about the browser, how it load and display pages.

There are different steps taken for a browser to display a webpage;

• A request has to be made by clicking on a link or refreshing a web page.
• The pages(documents) and its resource(css, image, javascript) files are downloaded.
• The web browser uses the page resources to build the page
• The page is then rendered to the user on the browser.

We will be taking an in depth look at the steps listed above.

Technically, the points listed above can also be referred to as

• Request
• Response
• Build
• Render

The period when a webpage is requested is known as navigation start. A request is made for a document when a link is clicked. That document is a webpage file which is a text file located in a web server.

Response

The response, is simply the browser receiving what it has requested for.

Assuming the document is a .html file, the web browser requests document, the web server provides document requested for.

Most webpages have resources file which is mostly the images, css and javascript. For the web browser to display the document, it has to get the resource files linked in the document.

Once a document is received by the web browser it reads the file to find resources referenced by the page and when found, a request for the resource files is made by the web browser to the web server.

Path to which document is displayed

Get document ->Get resources -> parse -> display webpage

• browser downloads the html file
• browser reads the html and sees that there are one css file, one javascript file and one image
• browser starts downloading the image
• browser decides it can not display the webpage without first getting the css and javascript
• browser downloads the CSS file and reads it to make sure nothing else is being called
• browser decides it still can not display the webpage yet until it has the javascript
• browser downloads the javascript file and reads it to make sure nothing else is being called
• Browser now decides it can display the webpage.

The path above is for a very simple webpage, now image what your path must look like.

Build

Once the web browser gets the resources it starts building. The combination of the document which is sometimes the .html file and the info from the resource files.

There are basically three steps that the browser takes to build a page.

Build the DOM

Build the CSSOM

Build the Render Tree

DOM simply means document object map. It is a map of where things are displayed on a page according to the html file.

CSSOM simply means css object map. A map of where styles will be applied to different parts of the page.

The render tree takes the DOM and the CSSOM and combines them to create a full map of how the page will actually be displayed.