How a webpage is
loaded and displayed
Speed > How web pages are displayed
Created: October 26th 2015
What are the steps of a webpage being displayed?
- A request is made when a link is clicked.
- The page and its resources (files) are downloaded.
- The web browser uses the page resources to build the page.
- 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.
The four steps listed above are often referred to more technically as...
Each of these steps are often performed several times during a page load.
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.
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.
When a linked is clicked a request is made for a document.
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 web server then provides the file to the web browser.
The response is simply the browser receiving the thing it had requested.
If this were a simple webpage (only HTML) the request and response stage of the page load would be complete.
These are called resources and in order to display the webpage the web browser must get those page resources as well.
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"
If resources are found in the HTML the web browser then requests each of those resource files from the webserver.
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.
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
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
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
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.
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
Layout / Reflow
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.
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...
Our next articles will look at each of these steps in more detail.