Explained in 4 mins đź’ˇ
What really happens when you type medium.com into the web browser and press enter? How is the website loading all the information and images?
Let’s find out.
I will explain this by telling you a small story.
The title of this story is Browser-Man 🦸 : Across the Internet.
One day, your friendly neighborhood Browser-Man received a request from a little kid. The kid loved reading blogs and wanted to visit medium.com to read more but he can’t do it by himself. He sought the help of Browser-Man, who needs to go and find where medium.com is, get the information it holds and then show it to the little kid.
Browser-Man has a superpower. He can communicate across the Internet, a multiverse of websites where almost anything and everything is possible. Browser-Man knows that medium.com is somewhere on the internet. The internet has its own version of Nick Fury who knows the address of all things on the internet. His name is DNS Fury. Browser-Man fires a signal to the DNS Fury saying, “Hey, can you tell me where medium.com is?”
DNS Fury looked into his address book and replied, “Yo, this is the address: 162.159.152.4".
Browser-Man sets up a connection to this address and sends a request.
“Hi there! A little kid here wants access to you. Send me your data and I will show it to them”
The address where medium.com is hosted receives and checks this request. If all looks good, it will send a response, “Cool! Here’s my data”.
Browser-Man successfully gets the data and then he looks into it and decides on how to show it to the little kid. Alas, the data looks very complicated with so many words, tags, images, etc. Browser-Man has something that can help him with this- The Rendering Engine. He uses it to successfully render the user interface page to show to the little kid.
Post credit question: **How does your web browser run JavaScript?**
Browser-Man will be back to answer that. #StayTuned
Ok, that’s a super oversimplification of how it happens, but you get the point, I hope. Let us reiterate the flow and I’ll point out a few additional points that are important. Some basic understanding of the internet, network, and web keywords are needed to understand the below details.
- The user types URL into the browser address bar. The URL contains the domain name (like medium.com), the protocol to use (https) and the resource to fetch ~say a specific webpage.
- The browser needs the IP address of this domain to send a request. If it is already there in a cache (like browser cache, OS cache, network cache), it picks it up from there. Else, the browser contacts the DNS (Domain Name System) server and this happens :P
- Once the browser has the IP Address, it will establish a connection with the server hosted at that IP address and send the request to get the required data.
- The browser gets the data in HTML format which it needs to parse and put into a Document Object Model (DOM). DOM is basically an internal representation of HTML data used to render the page.
- Similarly, a CSSOM tree is built, which includes all the CSS and styling data required to render the page. Both parsing and rendering are done by the rendering engine. The process of displaying content on the UI is literally called Painting.
- The browser engine helps process these actions between the UI and rendering engine.
- There’s a lot more happening behind the scenes. JavaScript parsing, running these scripts, data storage, and so forth.
- Also, how does the browser bring interactivity to life? Scripts can be used to modify the elements of the DOM to do the same.
Let’s catch up on some finer details in a future blog. This is your one-shot revision to how browsers run, a famous interview question asked by many firms out there.
I write this blog post for my own revision and retention too. In case you need clarity on something or find some errata in my understanding, feel free to let me know and I’ll update accordingly.
There is an amazing blog about how websites render and paint the UI you can read for more in-depth info.
How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks
You can read this other blog to revise the networking side of this process.
What happens when you type a URL into your browser? | Amazon Web Services
This blog post was first published by me on Medium here.
Top comments (0)