URL တစ်ခု Type လုပ်လိုက်ရင် ဘာတွေ ဖြစ်လာလဲ

နားလည်ထားရမယ့် အချက်

ဒီ lesson ဟာ ဒီ course ရဲ့ တစ်ခြား core lesson ပါ — url တစ်ခုကို type လုပ်ပြီး Enter နှိပ်လိုက်တဲ့အခါ ဖြစ်ပျက်သွားတဲ့ sequence တစ်ခုလုံးကို ရှင်းပြပေးမှာပါ၊ https://learn.example.com/course ကို ဥပမာယူပါမယ်။

ဒီ sequence ဟာ inherently step-by-step ဖြစ်ပြီး step တစ်ခုစီက ရှေ့ step ပေါ်မှာ မှီခိုနေပါတယ် — DNS resolve မလုပ်ရသေးရင် server ကို connect မလုပ်နိုင်ဘူး။

• Step 1-3 — domain ကို resolve လုပ်ခြင်း
• Step 4-7 — connection ထူထောင်ပြီး data လဲလှယ်ခြင်း
• Step 8-10 — response ကို page အဖြစ် ပြောင်းလဲခြင်း

URL TO RENDERED PAGE (10 STEPS)
-------------------------------
1.  Browser reads the URL
2.  Browser identifies the domain
3.  DNS resolves domain -> IP address
4.  Browser connects to server/CDN
5.  TLS/HTTPS connection established
6.  Browser sends HTTP request
7.  Server/CDN sends response
8.  Browser parses the HTML
9.  Browser fetches CSS, JS, images
10. Browser renders the page

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

code ဥပမာမှာ 10 step name တွေကို scrambled order နဲ့ ပေးပြီး predefined STEP_ORDER mapping ကို သုံးပြီး correct sequence အဖြစ် ပြန်စီတဲ့ function ကို run ကြည့်ပါမယ်။

Scrambled array ထဲမှာ "Browser renders the page" ကို ပထမဆုံး ထားပေမယ့် sortSteps run ပြီးနောက် output က correct order 1-10 ကို ပြသပေးပါတယ်။

• URL type လုပ်လိုက်ရင် step 10 ခုပါတဲ့ sequential lifecycle တစ်ခု စတင်ပါတယ်
• Step တစ်ခုစီဟာ ရှေ့ step ပေါ်မှာ မှီခိုနေပါတယ် — order ကို ကျော်၍မရပါ
• DNS, TLS, HTTP request/response ရဲ့ depth ကို Cloud & Deployment/API Tutorial/Cybersecurity မှာ ဆက်လေ့လာနိုင်ပါတယ်

အတူတူ စမ်းရေးကြည့်မယ်

const STEP_ORDER = {
  "Browser reads the URL": 1,
  "Browser identifies the domain": 2,
  "DNS resolves the domain to an IP address": 3,
  "Browser connects to the server/CDN": 4,
  "TLS/HTTPS connection is established": 5,
  "Browser sends an HTTP request": 6,
  "Server/CDN sends back a response": 7,
  "Browser parses the HTML": 8,
  "Browser fetches CSS, JS, and images": 9,
  "Browser renders the page": 10,
};

function sortSteps(scrambledSteps) {
  return [...scrambledSteps].sort((a, b) => STEP_ORDER[a] - STEP_ORDER[b]);
}

const scrambled = [
  "Browser renders the page",
  "Browser reads the URL",
  "Server/CDN sends back a response",
  "DNS resolves the domain to an IP address",
  "TLS/HTTPS connection is established",
  "Browser fetches CSS, JS, and images",
  "Browser identifies the domain",
  "Browser sends an HTTP request",
  "Browser parses the HTML",
  "Browser connects to the server/CDN",
];

console.log("Scrambled order:");
scrambled.forEach((s, i) => console.log(`  ${i + 1}. ${s}`));

console.log("\nCorrect order:");
sortSteps(scrambled).forEach((s, i) => console.log(`  ${i + 1}. ${s}`));

Scrambled order:
  1. Browser renders the page
  2. Browser reads the URL
  3. Server/CDN sends back a response
  4. DNS resolves the domain to an IP address
  5. TLS/HTTPS connection is established
  6. Browser fetches CSS, JS, and images
  7. Browser identifies the domain
  8. Browser sends an HTTP request
  9. Browser parses the HTML
  10. Browser connects to the server/CDN

Correct order:
  1. Browser reads the URL
  2. Browser identifies the domain
  3. DNS resolves the domain to an IP address
  4. Browser connects to the server/CDN
  5. TLS/HTTPS connection is established
  6. Browser sends an HTTP request
  7. Server/CDN sends back a response
  8. Browser parses the HTML
  9. Browser fetches CSS, JS, and images
  10. Browser renders the page

MDN Web Docs — Populating the page: how browsers work — How the Web Works