🙋 The scenario
You open your browser (Chomre, Safari or Firefox,... etc).
You type "google dot com" into your browser and then hit Enter or Return (for you Apple fan).
What really happens under the hood? 😅
In this article, I will walk you through the process of understanding this behavior - which we have done hundreds of thousands of times but maybe don't truly understand how it works.
So without further ado, let dive into it.
What is a URL?
URL stands for Universal Resource Locator
A URL has 4 paths:
http:// howardphung.com /blog/javascript-distilled/ 2023
⬇️ ⬇️ ⬇️ ⬇️
PROTOCOL DOMAIN PATH RESOURCE
1. Protocol (http://
or https://
)
This part tells the Browser to connect to the Server using a protocol called HTTP.
HTTPS is a more secure protocol because the connection is encrypted
2. Domain (howardphung.com)
Maybe we all know this one.
3. Path and Resource
From my point of view, there is no clear approach to distinguish between these two.
Just think of that like a file and directory in a regular file system and they all together define what data we want to get from the server.
What next 🤔
1. DNS Lookup 👀
The browser needs to know how to reach the server.
The server cannot understand a normal Domain name.
👉 Need to translate the Domain Name to an IP Address. This process is called DNS Lookup.
👉 DNS stands for Domain Name System
👉 Think of DNS as a phone book of the Internet 📕
1.1 Browser looks up IP in Cache
The DNS Information is heavily cached by the browser, the operating system also caches it for a short period of time.
If both of them don't have the DNS information, the operating system will make a query to the DNS Resolver.
1.2 Browsers lookup IP using recursive DNS lookup, this sets up a chain of requests to the DNS Server until the IP Address is resolved.
2. Established TCP connection 🔗
TCP stands for Transmission Control Protocol
After having the IP Address, the Browser established TCP connection with the server.
3. Browser sends HTTP requests to the server 🥳
4. Server sends back HTTP response to the Client 🤩
5. Browsers receive response and then render the content. (html, image, JS bundles...) 😎
I hope this article will be useful to you. Or maybe you can get some insights from it.
I'm Howard Phung from Web Dev Distilled,
See you again in the next one soon!