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...
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:
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-
- IP address resolution.
- 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.
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:
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.
This is only an overview. But, if you want to dig deeper into how each and every browser component works, refer here. 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.
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.
Thank you for reading. Hope this helps! 🦄🦄🦄