What Happens When You Open a Website in Your Browser?

A step-by-step breakdown of how browsers work.

This article was written for those curious minds who want to know the technical details about what happens inside a browser while we’re using it.

Starting point

So, we enter the following site address — practicum.com — into our browser address bar and press “Enter”. Then what?

Searching for the server on the web

Every site on the Internet is physically stored on a server somewhere. As soon as the browser receives the site address, it will need to figure out which server has that address’ data. But what we’re calling an “address” here isn’t really an address at all — it’s a domain name.

👉 Imagine that we’re really hungry and decide to get a pizza. Instead of telling the driver the exact address, like 123 Food Street, we simply ask to go to Practicum Pizza House. We do something similar when we enter a website’s name into our browser, and it’s the browser’s job to figure out how to get there.

Big Data Jobs

Now the browser has to determine where to send the request based on the domain name. What it needs to know is the IP address, short for Internet Protocol address. Each server has one, and it looks something like this:

32.184.208.243

Using these numbers, computers are able to communicate with each other and send the desired data. To figure out which IP address corresponds to a website, the browser does the following:

1. First, it checks whether the user has previously visited this site. If so, the browser will simply retrieve the IP address from the user’s history. It’s like when many trips are to the same pizza restaurant, the driver will likely remember the way.
2. If the site has not been visited, the browser will check the operating system’s configuration files. Sometimes, to speed up this process, system admins will specify IP addresses in the computer’s configuration itself.
3. If configuration files don’t contain the IP address, the browser then looks at the recent addresses in the router that the computer is using to connect to the web.
4. If it doesn’t find it there, the browser sends a request to the DNS server, which will definitely have it. However, this would take more time than other ways we discussed above.

Trending AI Articles:

1. Why Corporate AI projects fail?

2. How AI Will Power the Next Wave of Healthcare Innovation?

3. Machine Learning by Using Regression Model

4. Top Data Science Platforms in 2021 Other than Kaggle

A DNS (Domain Name System) server is a web service design to answer one question: what is the IP address of this specific domain name? There are many DNS servers on the Internet. Each of them contain information about their own slice of the network. If the nearest server doesn’t have the necessary domain name records, then it replies to say that it “doesn’t know” and provides the address of a bigger DNS that may be able to help. Eventually, the browser will find a DNS server that provides the IP address of the server it needs.

Is this article too long? Break things up and read another one of our articles instead: How the Internet works

Sending a request

The browser has finally found the IP address of the server hosting our desired website. It sends a request to this address that says something like: “I know that you have this domain. I need this page from this domain with these parameters. Give it to me, please.”

In order to keep safe and make sure that no one intercepts any data along the way, the browser and the server agree to encrypt all messages between each other. When you see “https” at the start of an address you know this encryption is in place. As soon as all these formalities are out the way, the server then replies: “Yes, of course, I’ll send everything right away.” Sadly, sometimes the address is incorrect, and the server can’t find the specified page. In these cases, it replies: “I don’t have the required page, I can’t help!” When that happens, the browser shows us a 404 error page.

Time for the server to “think”

When the server receives a request from the browser and everything is ok with the address, it starts preparing to send the data. To do this, it checks which server instances are responsible for this domain name, and tells them: “Please assemble this page for me so that I can send it to the browser.” For example, the server may have WordPress or a PHP processor that builds a page from different code fragments on the fly.

Sending data to the browser

Once the server’s internal programs have given the server everything it needs, it’s time to send the result to the browser.

To do this, the server breaks down all of the data into small packages that are only 8 kilobytes each! The server labels each of these packages with a number, and then sends them to the browser. This process allows for the simultaneous transmission of many packets, which in turn allows faster load times. Assigning numbers to packets is necessary so that the browser can correctly reassemble all the packages and get back the original document. If a package is lost along the way, the browser will tell the server: “I lost a package, please send it again.” This process will continue until the browser has collected all the required packages.

The browser’s turn to “think”

When the browser receives all of the packages, it parses the result into the following:

• HTML
• CSS
• JavaScript
• Other code that the browser can execute

This is necessary in order for the browser to build the page’s Document Object Model (DOM). A DOM contains information about:

• All the page elements
• The relationship between different page elements
• How elements interact with one another
• What the elements can do and how they react to user actions

Based on the DOM, the browser will eventually render the page on the screen:

Rendering the page

The browser needs to do one more thing: take the DOM, find all the visible elements in it, and render them for the user. If there is JavaScript involved, it may be executed either before or after rendering, depending on how the script works.

Sometimes, while a page is being rendered, the browser may request data from the server again. In this case, the browser renders what it already has, then renders the rest after the requested data arrives. If some data is missing, there may be empty spaces on the page. For example, when a browser has already rendered a page’s navigation menu and main article but is still loading a YouTube video.

Ready to rock

Once the page has loaded and the browser has rendered everything, we see the final result. But even after that, the browser can keep on working with the page. For example, it might:

• Run some JavaScript code
• Load music or a video in the background
• Load frequently visited pages on this site in the background to improve performance
• Write data to cookies or local storage
• Collect data about the user’s behavior on this page
• Or do something else that programmers have implemented

The web development program at Practicum lays out the most important concepts in detail: HTML & CSS, JS, DOM, working with APIs and databases, and web security. Try the intro course for free.

Don’t forget to give us your 👏 !