Ever wondered why typing any website say my personal one prasunchakra.com into your browser feels so quick, even though it involves a bunch of stuff happening across the world? From DNS servers connecting over the internet to your screen showing the final page, the web is built on many connected technologies.
Let's break it down step by step.
Let's start with the basic exchange between your browser and the server. This is the core of how the web works,it's like a simple back and forth conversation.
First, the request: When you type prasunchakra.com into your browser and hit Enter, your browser creates an HTTP request message. This is basically your browser saying, "Hey server, send me the main page for prasunchakra.com." It includes details like the URL, what type of data it's expecting (like HTML,CSS,JS), and some headers for things like your browser version or cookies if you've visited before.
Next, the processing: The server for prasunchakra.com gets this request. It checks the URL, goes into its directories, and pulls out the files needed. For prasunchakra.com, this might mean finding the index.html file, any linked images, or backend scripts if there's dynamic content. The server processes any logic, like running code to generate the page if it's not static.
Finally, the response: The server packs up an HTTP response and sends it back. This includes a status code (like 200 OK if everything's fine), and the actual content. For prasunchakra.com, it's usually the HTML for the page structure, CSS files for styling (like fonts and colors), and JavaScript for any interactive parts, like menus or forms. Your browser then starts putting it all together.
For a deeper understanding, think of it in two main parts: first, finding the server's address (that's DNS), and then actually connecting to it and getting the data (that's the request to the server).
Part 1: Finding the Address (DNS Lookup)
When you type prasunchakra.com into your browser, your computer doesn't know the exact location. It needs the IP address, something like 192.0.2.1, to reach the server.
It checks for the IP address in a few places locally first to save time:
Browser Cache: This is split into memory and disk. Memory cache is super fast, but it clears out when you close the tab or browser and disk cache, bit slower than memory but it sticks around between sessions. This is where stuff like images, scripts, or even DNS info from prasunchakra.com gets stored.
Service Workers: If prasunchakra.com uses one (it's a background script), it can grab requests and pull files from its own Cache Storage. This works even offline.
Operating System (OS) Cache: The browser then asks your OS (like Windows or macOS) if it has a recent DNS entry for prasunchakra.com saved in system memory.
Router Cache: Finally, your home router might have its own DNS table cached, speeding things up for all devices on your network.
If none of these have the IP, then it moves to asking the ISP's DNS resolver. Now when the DNS resolver needs to find the IP for "https://www.prasunchakra.com", it doesn't search everywhere at once. It follows a structure, reading the URL from right to left, like flipping through a phone book.
The Root Level (.): This is the top of the tree, hidden in every URL (think prasunchakra.com.) Root servers are like the main directory, they point to where the next level's info is stored.
Top-Level Domain (TLD): That's the ending like .com, .org, or .in. For prasunchakra.com, the root server says, "Go ask the .com servers." These TLD nameservers know all the .com domains and direct to the right one.
Second-Level Domain (SLD): This is the main name you picked, like "prasunchakra" The .com server points to the authoritative nameserver for prasunchakra, which is usually set up by your hosting provider (maybe Cloudflare or GoDaddy). That's where the actual IP is stored.
Third-Level Domain (Subdomain): If it's something like blog.prasunchakra.com, the authoritative server handles the "blog" part. Subdomains let you point to different sections or servers, like blog.prasunchakra.com going to a separate machine.
This whole process usually takes milliseconds because of caching at each level. Once done, your browser gets the IP and moves to the connection phase.
Part 2: The Connection Phase (Handshakes)
Now that we've got the IP address from DNS, it's time for the connection phase. This is where your browser sets up a reliable and secure link to the server hosting prasunchakra.com before asking for the page.
- The TCP 3-Way Handshake (For Reliability) The internet can drop packets sometimes, so TCP makes sure everything arrives in order and nothing gets lost. Before sending any real data, the browser and server do a quick check to confirm they're both ready.
SYN (Synchronize): Your browser sends a packet to the server's IP. It's like saying, "Hey, prasunchakra.com server, I want to connect. My starting number is X."
SYN-ACK (Synchronize-Acknowledge): The server gets it and replies, "Okay, got your message. I'm ready too. My starting number is Y, and I confirm yours (X+1)."
ACK (Acknowledge): Your browser sends back, "Cool, I got that. Let's go (Y+1)."
Now the connection is open, and data can flow reliably.
- The TLS/SSL Handshake (For Security) If it's HTTPS (you see the padlock for prasunchakra.com), there's an extra step right after TCP to encrypt everything. This stops your ISP or anyone on the network from snooping on your data.
Client Hello: Your browser sends a list of encryption options it supports (called cipher suites) and some random data.
Server Hello + Certificate: The server picks one option, sends its own random data, and shares its digital certificate (signed by someone trusted, like Let's Encrypt).
Authentication: Your browser verifies the certificate: "Is this really prasunchakra.com? Yes."
Key Exchange: Using math like RSA or Diffie Hellman, they agree on a shared secret key. They start with slow asymmetric encryption just to set up a faster symmetric key for the rest.
Finished: Both confirm, "Alright, from here on, all data is encrypted."
With the connection secure, the browser can finally send the HTTP request for the page.
Part 3: Getting the Data (HTTP Request)
Once the secure connection is set up, the server for prasunchakra.com sends back the response packets. Your browser starts receiving them and begins the rendering process to show the page. This happens in stages, turning raw code into what you see on screen.
- The Construction Phase (DOM & CSSOM)
As the HTML starts coming in chunks, the browser doesn't wait for everything—it begins building right away.
DOM (Document Object Model): The browser reads the HTML and builds a tree structure from it. For prasunchakra.com, every tag like <div>, <p>, or <img> becomes a node in this tree, representing the page's skeleton.
CSSOM (CSS Object Model): While parsing the HTML, it spots <link>tags for CSS files. The browser downloads and parses these to get the styling rules, like colors, fonts, and sizes for prasunchakra.com.
CSS blocks rendering. The browser won't display anything until the CSSOM is done, to avoid showing a plain, unstyled page first (that's called Flash of Unstyled Content or FOUC). It wants prasunchakra.com to look right from the start.
- The Interaction Phase (JavaScript) Next comes JavaScript, which adds the dynamic parts.
JS is Parser Blocking that is when the browser hits a <script> tag in the HTML for prasunchakra.com, it stops parsing the rest of the HTML. It downloads the script, runs it, then continues.
Why? Because JS can change the DOM on the fly, like adding or removing elements. The browser doesn't want to build something that JS might mess up right after.
To fix, we use async or defer on script tags. Async loads JS without blocking but runs it as soon as it's ready. Defer waits until the HTML is fully parsed. That's how modern sites like prasunchakra.com speed things up!
- The Visual Phase (Render Tree, Layout, and Paint)
With DOM and CSSOM ready, the browser combines them to draw the page.
The Render Tree: It merges DOM and CSSOM, skipping hidden stuff like <head> or elements with display: none. For prasunchakra.com, this creates a visible structure.
Layout (Reflow): The browser calculates positions and sizes— like how wide a div is or where an image sits on prasunchakra.com.
Paint: It fills in the details: text, colors, borders, images—all the pixels for the page.
Compositing: For layered elements (like a sticky navbar on prasunchakra.com), it uses the GPU to combine them into the final screen image efficiently.
With this we've covered the journey from typing prasunchakra.com into your browser to seeing the fully rendered page on your screen. It's a mix of DNS lookups, secure connections, and browser magic that makes the web feel effortless. But this is just the start and there's a lot more under the hood, like how the backend handles things or advanced topics in networking and security. Stay tuned!
Top comments (0)