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

2. Hit the server to fetch what is to be rendered on the UI

3. Construct, paint, and render the page

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:

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.

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.

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
How DNS works
Rendering HTML into the browser

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