How a webpage is
loaded and displayed

> How web pages are displayed

Created: October 26th 2015

What are the steps of a webpage being displayed?

  1. A request is made when a link is clicked.
  2. The page and its resources (files) are downloaded.
  3. The web browser uses the page resources to build the page.
  4. The page then is rendered (displayed) to the user.

Each of the above steps have many components and details, but those four steps are the main things that happen to display a webpage to a user.

This article will discuss each of these steps to provide an overview of what actually happens when a webpage is displayed in a browser.




Technically speaking

The four steps listed above are often referred to more technically as...

  1. Request
  2. Response
  3. Build
  4. Render
request, response, build, and render

Each of these steps are often performed several times during a page load.

The request

Before we go into what happens when a webpage is requested, let's look at what makes a webpage get requested in the first place.

The most common way a webpage is requested is when a link is clicked, but requests also occur when a page is refreshed, or when a url is typed into a browser.

navigation start

The moment when a webpage is requested is also called "navigation start".

It is basically the moment where the whole process of displaying a page begins.

The document

When a linked is clicked a request is made for a document.

a link click and an html file

The document is the webpage file, which is just a text file. It is located on a web server (a webhost).

This file is often of the type ".html", but the type of file it is doesn't really matter. The important thing is that a text file is requested by the web browser.

The file gets requested using a system called HTTP.

At this point we do not need to understand HTTP, we just need to understand that a web browser asks for the file from a web server.

The response

The web server then provides the file to the web browser.

The response is simply the browser receiving the thing it had requested.

browser asking for file from server

If this were a simple webpage (only HTML) the request and response stage of the page load would be complete.

However, most webpages have things like images, css, and javascript.

These are called resources and in order to display the webpage the web browser must get those page resources as well.

Parsing

So how does a web browser know if a page needs additional resources?

Once the browser has received the document (html file) it reads it.

When a computer reads a file looking for something, it is called "parsing"

browser parsing file and requesting resources from  server

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.

The way it chooses to download those resources and the order in which resources are downloaded is a bit complex and will be explained in another article. If you are curious, I would look at the critical rendering path.

The Build

webpage being constructed

Once the web browser has the required resources it can start building the page.

The way a web browser builds the page is by combining the information found in the document (the original HTML file) and the information found in the resources.

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

  • Build the DOM
  • Build the CSSOM
  • Build the Render Tree

Building the DOM

html file and dom table

DOM stands for "Document Object Map". It is basically a map of where things are displayed on a page according to the HTML. The DOM represents what the HTML is saying by mapping out the page in a relational manner.

Building the CSSOM

css file and cssom table

CSSOM stands for "CSS Object Map". It is basically a map of what styles should be applied to different parts of the page according to the CSS. The CSSOM maps out the way things should be presented using styles.

Building the render tree

dom table and cssom table

The render tree essentially 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.

The Render

After all of the above steps have been performed the browser can now finally put something up on the screen.

There are two main things that happen here...

  • Layout / Reflow
  • Paint

Layout / Reflow

measuring sizes

The browser at this point knows what it should display (the DOM) and in what manner to display it (the CSSOM) and the relationship between those two (the render tree).

What it does not know is the size in which to display everything and where everything will end up on a screen.

An example of this might be where a div called "sidebar" is supposed to be 25% of the screen on the right hand side.

Hmmm, 25% of what?

This part is called the layout or the reflow, and it is basically where the browser determines how big a screen is and how that will affect the way the page is displayed.

Paint

Now that all the calculations are done, the browser can actually display something on the screen.

This is called the paint.

In this final stage the browser will convert each node in the render tree to actual pixels on the screen.

Putting it together

We broke the process of displaying a webpage into four parts...

  • Request
  • Response
  • Build
  • Render

Our next articles will look at each of these steps in more detail.






Patrick Sexton by