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!
Did I miss any crucial concept?
Your input is invaluable.
Please let me know!
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