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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

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

Okay