HomeWordPress Guides & Tutorials

How are Webpages Displayed? Beginner’s Guide – Step by Step

How are Webpages Displayed? Beginner’s Guide – Step by Step
1 Shares

Before you dive into the Process of Website Speed Optimization, it is crucial that you know the various stages involved in rendering a Webpage.
Without much introduction, Let us get behind the walls on how  Webpages are rendered and  displayed to the user.

How are Webpages Displayed – The Process Involved

There are 4 major steps involved when a page is displayed on the Web Browser namely:
1. Request: Made by the Web Browser when a User types in the URL or clicks a  link.
2. Response: Prepared by the Web Server and sent to the Web Browser.
3. Downloading and Parsing: of Resources by the Web Browser.
4. Rendering or Displaying: the page to the User.

Each of these Components i.e. The Request, Response, Downloading and Parsing of Resources and the Rendering has small steps involved in it.

I will walk you through the important points of each of these components in a clearly simple manner.

The Request

This action is triggered by the Web Browser when a user types in a URL/ clicks a link or similar cases.

The overall processes involved in the Request Phase are listed below sequentially.
1. The User types in a URL in the Web Browser or clicks a link.
2. The Web Browser looks for Resources in its Cache, If these Resources are available it is directly displayed to the User or else.
3. The Web Browser sends a request for a document/ text file which is usually a .html file to the Web Server.

The Response

On the Request made by the Web Browser, the role of Web Server comes into play which provides the required text file to the Web Browser.

Request-Response-of-Website

Downloading and Parsing of Document

A Webpage is a combination of resources such as HTML, CSS and JS files along with other resources such as Images etc. Therefore, in order to know if the Web Browser needs any of these additional Resources, the Browser parses or reads the HTML Document/ Text file after which if it encounter’s any reference to the CSS/ JS files/ Images it sends and additional request to the Server for the Resources governed by the method of HTTP.

Rendering or Displaying of the Webpage

Once the Browser has all of the Resources available; It does the Job of building the webpage with the help of Resources/ Information available i.e. the CSS/ JS/ Images etc.

The Building of Webpage is done according to the DOM and CSSOM tree and finally is displayed to the User.

Conclusion

The entire Request – Response between the Web Browser (The Client Side) and the Web Server (The Server Side) is governed by the HTTP method which will be discussed later.

How are Webpages Displayed? Beginner’s Guide – Step by Step
3.2 (63.33%) 6 votes

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *