Source: Own illustration
Today we’ll take you on a journey that starts with your request in the browser and ends with the final rendering of the web page.
What is actually happening in the background when you open a web page? How do browsers work? What is a DNS and what does a port have to do with it?
Back to Basic
Computers or processors work with a binary number system and basically only understand 0 and 1. However, if these are combined with each other, further numbers are formed from them. This is how the so-called IP addresses are created, which are assigned to every computer or device with Internet access. IP addresses function like a telephone number that is assigned to one particular person. Most of us humans are better at remembering words or phrases instead of numbers, which is why computers also work with words instead of numbers for many purposes. Originally, we would have to enter the IP address of a web server in the URL line of a browser to reach it and open the web page. To avoid having to do this, there is something called DNS.
The DNS – Domain Name System
In order for us to be able to simply type words into the browser, there is what is known as DNS (Domain Name System). DNS acts as a translator, which converts IP addresses into words, or more precisely, the domain. This also works the other way around. The domains can also be converted into IP addresses. The DNS may also be thought of as a huge telephone book. When a request is made for a domain, the phone book looks up the IP address of the server where the web page is stored.
So How Do Browsers Work?
With this background knowledge, imagine you are sitting in front of your computer and type a domain into the URL line of your browser.
What Does Your Browser Do Now?
The browser sends a request to a DNS server. Initially, the browser doesn’t know on which server the website is available. However, the browser does know the address of the DNS server. The browser now makes a query to this DNS server: Which web server do I need to contact to find the website www.itc.rwth-aachen.de? The DNS server then searches its huge database and provides the browser with an IP address. In the next step, the browser sends a new request to the web server based on the IP address it received. However, it adds a port to this request. In this example, it is the so called port 443, which tells the web server that the request is an “https” request.
The Right Ports and Source Codes
Most of you are familiar with the “https” at the beginning of an URL. The “https” is a protocol for displaying web pages. Ports are similar to mailboxes in an apartment building. Just like every household has its own mailbox, every protocol has its own port. A port is how information gets from your computer to the Internet or from the Internet back to your computer.
All websites communicate with the Internet in order to be able to show the website content. This means that there are various data sent from the Internet to your computer. The ports tell the computer which data belongs to which application, or web page.
Each port has a different serial number. The data arriving to your computer all contain a port number. For example, port 443 is used for requests for web pages. Thus, to reach the website itc.rwth-aachen.de, the request is sent through port 443. The purpose of the request is to display the website. Once the request has been made, the web server looks for all the information it needs to display the web page. It looks for information, images as well as texts and assembles a source code with it, which is then sent back to the browser.
The browser only receives a text file with the source code. This contains the information it needs to display the web page. For example, the title of the page, a link to a PDF, or the URL to an image.
The browser then starts working its way through the source code from top to bottom. While working through the file, the browser notices, for example, that it is missing a font or images. However, these resources are located on other web servers on the Internet, so the browser has to make further DNS requests. Further DNS queries are made for each individual resource. In other words, the whole process is repeated from the beginning. Depending on how many elements the web page has and how much data the browser has to gather, the longer the loading time of the page will be.
Finally – The Rendered Page
Simultaneously with retrieving this data on other servers, the browser starts “rendering” the page. This means the browser starts displaying the page. This all happens usually within a few seconds. Once the browser has gathered all the information, the page is finally loaded and displayed to you in its entirety.
Responsible for the content of this article is Janin Vreydal.
