DEV Community


Posted on

Lifecycle of a URL Request

Last week, I came across a valuable LinkedIn article by Brij Kishore Pandey detailing the journey of a "URL from Keyboard to Screen". I've written this blog to save its insights, but if you're in tech, I highly recommend reading it. The article breaks down the components and flow of a URL request.

The Journey of a URL: From Your Keyboard to a Fully Loaded Web Page! 🌐

Ever wondered what happens behind the scenes when you type a URL into your browser's address bar and hit Enter? 🤔

Let's demystify the magic that unfolds in milliseconds! ⏱️

🖥️ Client-Side Magic:

1️⃣ Initiating TCP Connection: Your browser initiates a TCP/IP 3-Way Handshake (SYN, SYN-ACK, ACK) to establish a connection.
2️⃣ HTTP Request: A GET request is sent to the server.
3️⃣ Browser Engine: The browser engine takes over, coordinating between the render engine and networking tasks.

🌐 The Role of DNS:

1️⃣ Root Domain Name Server: Helps in identifying the Top-Level Domain (TLD).
2️⃣ TLD Name Server: Points to the 2nd Level Domain Name Server.
3️⃣ 2nd & 3rd Level Domain Name Servers: They help in resolving the IP address of the website.

🖥️ Server-Side Magic:

1️⃣ Server Response: The server responds with status codes:

1xx: Information Message
2xx: Success
3xx: Redirects
4xx: Client Errors
5xx: Server Errors

🌍 Web Page Rendering:

1️⃣ Tokenizer & DOM Tree: HTML is parsed and a DOM tree is created.
2️⃣ CSSOM Tree: CSS is parsed into a CSS Object Model (CSSOM) tree.
3️⃣ Render Tree: DOM and CSSOM trees are combined.
4️⃣ Layout & Painting: The final layout is calculated and painted on the screen.

Your Web Page is Loaded!

Here's the image:

Image description

This post is inspired by and based on a sketch from @manekinekko on X(Formerly Twitter)
This Gif it licensed under :

Top comments (0)