DEV Community

gallau
gallau

Posted on

1

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 : https://lnkd.in/eBAGdRtG

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay