How Browsers Load and Display Webpages
HTTP is the primary protocol of the web, which is used by browsers and servers to transfer content through the web.
While browsing the internet, this might seem like a simple mechanism.
You just type the web address that you wish to reach, or you click on a link, and the contents of the site appear within a few seconds.
What actually happens in between clicking on a link, and a website's appearance is a rather complex process. Your browser has to identify the server of the website, communicate with using the Hypertext Transfer Protocol and send and receive data packages.
The most important steps in this process are the following:
In this post, I'm going to show you what happens during each these distinct steps, that lead to the appearance of the sites, that you wish to visit.
DNS Lookup
When you type an URL into your browser and press Enter, your computer first connects to the server of the internet service provider, which will look up, and send back information about the requested site's location.
The computers, that handle these tasks are called DNS servers. What they do basically is translating domain names, which people are able to recall, to a long sequence of identification numbers, called IP addresses, that computers can interpret.
The browsers are only able to connect to the websites, that you’d like to visit, once they receive these long number sequences from the name servers.
Connecting
During this phase, your browser uses the received number to establish a connection with the web server of the site that you wish to visit. As there are different communication protocols on the web, your computer and the server has to agree on the "language" that they will use in the future.
Data transfer
Once the connection is established, the client sends a request to the server. This message contains the address, that you are trying to reach and specifies what kind of data is needed to display contents of the page. It could also contain the values of the input fields.
Waiting
This is when the actual work happens on the server. The running applications collect the required data, connect to databases, and in some cases to other computers as well. At the end of this step, the server constructs the source code of the web page, that you wish to visit.
Receiving data
The step, that follows waiting is also called HTTP response. During this phase, the server sends the data, which is needed to display the contents of the web page back to the browser.
This ends the communication between the browser and the web server. The client verifies this by sending a FIN package back to the server.
In this phase, the contents are still not visible in the browser. It will need to complete two more tasks for this to happen.
Loading the DOM
DOM is a contraction for "Document Object Map". Which is basically a map of where things should be displayed on a page according to the HTML.
Building up its tree structure might require significant resources if the browser tries to display a complex website.
Loading the page
After building the DOM, the browser finally arrives at the final step and loads the page. The contents of the site, you wished to visit appear on your screen, and this ends this long process.
At least, until you click somewhere because that is when it will all start again.
It may sound strange, but I simplified this process in many ways for this post.
There are several rules that govern each step, and numerous processes within the steps, that I didn't write about. If you'd like to know more about how browsers display web pages I advise you to search for a more detailed description of each step.
And if you'd like to know, how your site's server performs during these phases, just log in to WebyMon. We measure the speed of every step on the sites, that you monitor with our app, and show you the results in a visually appealing way.