Browser တကယ် ဘာလုပ်လဲ

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

Browser ဆိုတာ URL box တစ်ခုနဲ့ page ပြနေတဲ့ window တစ်ခုသက်သက် မဟုတ်ပါဘူး — job အများကြီး တစ်ပြိုင်နက် လုပ်နေတဲ့ software ရှုပ်ထွေးတစ်ခုပါ။

Browser ဟာ local state အချို့ကိုလည်း သိမ်းဆည်းပေးပါတယ် — cookies နဲ့ localStorage ရှိတယ်ဆိုတာကို ဒီနေရာမှာ ဖော်ပြရုံသာ ပြုပါမယ်၊ cookies ကို နောက်ပိုင်း lesson မှာ နက်နက်နဲနဲ ဆက်ရှင်းပါမယ်။

ဒီ job အားလုံးကို လုပ်ဆောင်ပေးတဲ့ core component ကို browser engine လို့ခေါ်ပါတယ် — Chrome/Edge က Blink, Firefox က Gecko, Safari က WebKit ကို သုံးပါတယ်။ engine internals ကတော့ ဒီ course scope အပြင်ဘက်ပါ။

Browser Engine

HTML parse, CSS apply, JavaScript execute, page render လုပ်ဆောင်တဲ့ browser ရဲ့ core software component ပါ — Chrome/Edge က Blink, Firefox က Gecko, Safari က WebKit ကို သုံးပါတယ်။

HTML + CSS + JS -> BROWSER -> RENDERED PAGE
-------------------------------------------
HTML  ---\
CSS   ----> BROWSER ---> RENDERED PAGE
JS    ---/

  Inside the browser:
  1. Request resources
  2. Parse HTML (build DOM)
  3. Apply CSS (build styles)
  4. Execute JS (run logic)
  5. Render pixels to screen

  (also: stores cookies/localStorage,
   enforces browser security rules)

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

code ဥပမာမှာ page ingredient (html, cssRuleCount, jsScriptCount) ကို input အဖြစ်ယူပြီး browser က လုပ်ဆောင်မယ့် processing step order list ကို return ပေးတဲ့ function ကို run ကြည့်ပါမယ်။

• Text-only page — Parse HTML, Layout, Paint (step 3 ခု)
• Styled page — CSSOM apply + render tree ပေါင်းတာ ထပ်ပါ (step 5 ခု)
• Interactive page — Execute script step ပါလာ (step 6 ခု)

ဒီ function ဟာ real browser engine pipeline ကို တိကျစွာ simulate လုပ်တာ မဟုတ်ပါဘူး — ingredient ပါ/မပါအလိုက် step order ဘယ်လို ကြီးလာလဲ ဆိုတဲ့ conceptual illustration ပါ။

• Browser ရဲ့ core job တွေက request, parse, style, execute, render ဖြစ်ပါတယ်
• Browser engine ဆိုတာ ဒီ job တွေကို လုပ်ဆောင်ပေးတဲ့ core component ပါ
• Cookies/localStorage နဲ့ security rule တွေဟာ browser ရဲ့ တာဝန်တွေထဲ ပါဝင်ပါတယ်

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

function getProcessingSteps(page) {
  const { html, cssRuleCount, jsScriptCount } = page;
  const steps = [];

  if (html) steps.push("Parse HTML into the DOM tree");
  if (cssRuleCount > 0) steps.push(`Apply ${cssRuleCount} CSS rule(s) to build styles (CSSOM)`);
  if (html && cssRuleCount > 0) steps.push("Combine DOM + CSSOM into a render tree");
  if (jsScriptCount > 0) steps.push(`Execute ${jsScriptCount} script(s)`);
  steps.push("Layout: calculate size/position of each element");
  steps.push("Paint: draw pixels to the screen");

  return steps;
}

const textOnlyPage = { html: "<p>Hello</p>", cssRuleCount: 0, jsScriptCount: 0 };
const styledPage = { html: "<p>Hello</p>", cssRuleCount: 3, jsScriptCount: 0 };
const interactivePage = { html: "<button>Click</button>", cssRuleCount: 2, jsScriptCount: 1 };

for (const [name, page] of [
  ["Text-only page", textOnlyPage],
  ["Styled page", styledPage],
  ["Interactive page", interactivePage],
]) {
  console.log(`${name}:`);
  getProcessingSteps(page).forEach((step, i) => console.log(`  ${i + 1}. ${step}`));
}

Text-only page:
  1. Parse HTML into the DOM tree
  2. Layout: calculate size/position of each element
  3. Paint: draw pixels to the screen
Styled page:
  1. Parse HTML into the DOM tree
  2. Apply 3 CSS rule(s) to build styles (CSSOM)
  3. Combine DOM + CSSOM into a render tree
  4. Layout: calculate size/position of each element
  5. Paint: draw pixels to the screen
Interactive page:
  1. Parse HTML into the DOM tree
  2. Apply 2 CSS rule(s) to build styles (CSSOM)
  3. Combine DOM + CSSOM into a render tree
  4. Execute 1 script(s)
  5. Layout: calculate size/position of each element
  6. Paint: draw pixels to the screen

MDN Web Docs — How browsers work — How the Web Works