In the modern age of the internet, where accessing information is just a click away, the journey of a URL from the moment it’s typed into the browser to the display of the desired webpage is an intricate process involving various components of the web stack.
DNS Look up
Your browser first channels the Domain Name System (DNS) to translate the human-readable URL (like www.example.com) into an IP address (e.g., 123.456.78.90), which identifies the server where the website is hosted.
To make this lookup process fast, the DNS information is heavily cached.
1.First the browser itself caches it for a short period of time. And if it is not in the browser’s cache .The browser asks the operating system for it.
2.Also,The operating system itself has a cache for it… which also keeps the answer for a short period of time.
if the operating operating system doesn’t have it, it makes a query out to the internet to a DNS resolver. This sets off a chain of requests (Recursive lookup to the DNS Server ) until the IP address is resolved.
Using IP to establish TCP connection
there’s a handshake-process involved in establishing a TCP connection. It takes several network-round-trips for this to complete. To keep the loading process fast, modern browsers use something called a keep-alive connection to try to reuse an established TCP connection to the server as much as possible.
This handshake is expensive and the browsers use tricks like SSL session resumption to try to lower the cost. Finally, the browser sends an HTTP request to the server over the established TCP connection.
HTTP Request
HTTP Request: After getting the IP address, the browser sends an HTTP request to the server asking for the website’s content, like “Hey, give me the page at this URL.”
Server Response
Server Response: The server processes the request and sends back a response, which usually includes the HTML, CSS, JavaScript, and sometimes images or videos that make up the website.
The browser receives the response and renders html content. Oftentimes there are additional resources to load, like javascript bundles and images.
resource fetching.
The browser repeats the process above that we mentioned to finish fetching all the other resources.
When a browser receives the initial HTML content, it often contains links to other resources like JavaScript, CSS, and images. The browser then repeats the process of making additional HTTP requests to fetch each of those resources.
This entire flow of making multiple requests and processing them to fully load a website is called the “resource loading process” or “resource fetching.”
To optimize this, browsers handle many of these requests in parallel, fetching multiple resources simultaneously to speed things up. So, even though many requests are made, they aren’t strictly sequential; they happen concurrently, making the site load faster.
Rendering
Rendering: Your browser then takes this response and renders it, displaying the website visually for you to interact with.
So basically, the browser is like a translator and a middleman between you and the server.