Behind the scenes: From the moment you enter a URL
Tags: webdev, beginners, computerscience, architecture
Published: 2020-05-27 17:43:35

Recently in a job interview, I was asked- "What happens from the moment you enter a URL in the browser?". Although, I had an overall idea, I was quite unable to construct the entire flow loquaciously. This article is meant to give you (and me) a seamless flow chart of what happens from top to bottom until you see the very webpage. It covers both, the browser components and server side resolution of domains. 
So without further ado, let's dive in...

## The overall picture
Although, a webpage loads in a matter of seconds, there is quite a lot going on in the background. For simplicity, we will split them into three major flows:

#### 1. Get the IP address of the server that your domain name refers to
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0x0qzu9xi1av6ct2dnmm.png)
#### 2. Hit the server to fetch what is to be rendered on the UI
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/px0cu6wb80fh107gv40p.png)
#### 3. Construct, paint, and render the page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s25rhzjnd32gt9rpk968.png)

This is it. It's as simple as three steps. However, the complex part kicks in when we dive deeper into the two black boxes- 
1. IP address resolution.
2. Constructing and rendering webpage.

If you are backend developer, the first will be of prime concern to you, and for frontend folks it's the browser rendering that takes precedence. 
Anyways, let's look into both of them. 

## Domain name to IP Address using Domain Name Server(DNS)
Although this article is not meant for heavy theory (there are plenty on the internet), I will give a small summary why this block is important. 

We as human beings don't retain long numbers. And machines don't understand our sophisticated language. As a win-win solution, we give **names** (domain name) to our servers while they have their identity as IP Addresses (numbers). So how do we bridge the gap and communicate? **Domain Name Server** acts as our mediator! 
This is what goes behind the curtains: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nmgeburj0q5o1vazjkxr.png)
*Sorry if image is too small on your device, I had to fit in a lot of content in one flow chart. I urge you to download it and analyse each component. They are quite self-explanatory.*

## How the user finally gets a fancy webpage
Once we have resolved the IP Address of the server that has our relevant data (the webpage), all there is left is to actually hit it and fetch what we wanted. Most of the time, we get an HTML page in response, but we also have instances when it is a PDF, or other content-types like image, JSON, XML etc.

In this section, we will see how the browser converts an HTML file (bunch of nodes, scripts, and stylings) into a full-fledged viewable page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yn1m5ni71ykq992o6z2b.png)

This is only an overview. But, if you want to dig deeper into how each and every browser component works, refer [here](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Introduction). This site is pretty much the Magnum Opus of how browser renders the HTML with embedded scripts and painted stylings. 

However, I would like to mention a couple of important points here-
1- Your **Browser Engine** holds your JS environment like v8(for chrome) that has call stack, memory heap, event loop, Web API.. yada yada.
2- It's the **Render Engine** that parses the HTML nodes into a DOM tree and then further into a painted(CSS applied) render tree to display. 
3- Everytime your HTML parser encounters **script** tag, it **PAUSES PARSING DOM elements** (IMPORTANT!!!) and synchronously downloads all scripts first.

## Conclusion
Again, the agenda of this article was to help you articulate a big picture into a consolidated 3 min answer if anybody ever asks you- *"What happens when you enter a URL?"*. Of course, there is a lot to explore here, and there are brilliant sources online to do so. Mentioning some of them in the references below. 

## Reference
[The Big Picture] (https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a)
[How DNS works] (https://www.youtube.com/watch?v=mpQZVYPuDGU)
[Rendering HTML into the browser] (https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Introduction)

Thank you for reading. Hope this helps! 🦄🦄🦄