How a webpage gets displayed?

A request is made when a link is clicked. --Request

1.       The page and its resources (files) are downloaded. -- Response

2.       The web browser uses the page resources to build the page.-- Build

3.       The page then is rendered (displayed) to the user.-- Render

Requests:

Requests are made when

·       A link is clicked

·       A page is refreshed

·       When a URL is typed into a browser

When a linked is clicked a request is made for a document which is a text file ( example .html) located on a web server. The file is requested using the HTTP protocol.

Response:

The response is simply the browser receiving the file  it had requested from the web . Apart from the html the web browser needs to get resources like images, css and javascript for it to display the webpage.The web browser looks at the entire HTML document and looks for any css, javascript and images that are referenced by the page.If resources are found in the HTML the web browser then requests each of those resource files from the webserver.

The images, css, and javascript that the HTML file references will be downloaded by the browser.

Build:

 Once the web browser has the required resources it starts building the web page in below 3 steps:

• Build the DOM- DOM stands for "Document Object Map". It is  a map of where things are displayed on a page according to the HTML.
• Build the CSSOM- It is a map of what styles should be applied to different parts of the page according to the CSS.
• Build the Render Tree- The render tree takes the DOM and the CSSOM and combines them to create a full map of how the page will actually be laid out and painted.

Render

At the end of it browser puts things on to the screen by deciding the Layout and then the browser will convert each node in the render tree to actual pixels on the screen.