Skip to content
Takkatho University Takkatho University Takkatho
GitHub

How Browsers Show Pages & Reducing Delays

Browser တစ်ခုက Code မှ Webpage အဖြစ်သို့ ပြောင်းလဲပုံ (The Critical Rendering Path)

Section titled “Browser တစ်ခုက Code မှ Webpage အဖြစ်သို့ ပြောင်းလဲပုံ (The Critical Rendering Path)”

  1. HTML မှ DOM Tree သို့: Browser က HTML code ကိုဖတ်ပြီး element အားလုံး ပါတဲ့ မြေပုံ တစ်ခု Document Object Model - DOM ကို တည်ဆောက်သည်။

  2. CSS မှ CSSOM Tree သို့: Browser က CSS code (stylesheet များနှင့် inline style များ) ကိုဖတ်ပြီး element တစ်ခုချင်းစီရဲ့ ပုံပန်းသဏ္ဌာန်မြေပုံ (CSS Object Model - CSSOM) ကို တည်ဆောက်သည်။

  3. JavaScript အလုပ်လုပ်ခြင်း: JavaScript က HTML (DOM) နှင့် CSS (CSSOM) ကို ပြောင်းလဲနိုင်သည်။ သေချာ load မလုပ်ပါက HTML ဖတ်ရှုခြင်းကို ခေတ္တရပ်တန့်စေနိုင်သည်။

  4. Render Tree တည်ဆောက်ခြင်း: Browser က DOM နှင့် CSSOM ကိုပေါင်းစပ်ပြီး page မှာ ပေါ်မဲ့ element များနှင့် သူတို့ရဲ့ style များပါဝင်သည့် Render Tree ကို ဖန်တီးသည်။

  5. Layout (သို့မဟုတ် Reflow): Browser က Render Tree ထဲရှိ element တစ်ခုချင်းစီ၏ တိကျသောအရွယ်အစားနှင့် နေရာကို တွက်ချက်သည်။ (ဥပမာ - ဤ box သည် width 300px ရှိပြီး အပေါ်မှ 50px အကွာတွင် ရှိသည်)။

  6. Paint: Browser က element တစ်ခုချင်းစီအတွက် pixel များကို screen ပေါ်တွင် layer များအဖြစ် ရေးဆွဲသည်။

  7. Composite: Browser က ဆွဲပြီးသား layer အားလုံးကို ပေါင်းစပ်ပြီး နောက်ဆုံးပေါ်မည့် page ကို screen ပေါ်တွင် ပြသသည်။

browser rendering process

Render-Blocking Resource များကို ရှာဖွေခြင်းနှင့် လျှော့ချခြင်း

Section titled “Render-Blocking Resource များကို ရှာဖွေခြင်းနှင့် လျှော့ချခြင်း”
  • Rendering-blocking resources တွေဆိုတာ browser ရဲ့ rendering process ကို block ဖြစ်စေသော အရာများဖြစ်ပါတယ်။
    • <head> ထဲရှိ ပြင်ပ CSS ဖိုင်များ (<link rel="stylesheet" href="...">) သည် ပုံမှန်အားဖြင့် render-blocking ဖြစ်စေပါတယ်။ (browser က အဲ့ဒီ file တွေကို စောင့်ပြီးမှ rendering process ကို လုပ်တာပါ)။
    • <head> ထဲရှိ async သို့မဟုတ် defer မပါသော ပြင်ပ JavaScript ဖိုင်များ (<script src="...">) ကလဲ render-blocking ဖြစ်စေပါတယ်။
    • ဒီကြန့်ကြာမှုများက FCP, LCP နှင့် page load time ကို နှေးကွေးစေပါတယ်။
  • အဓိကနည်းလမ်းများ (Quick Recap):
    • JavaScript အတွက်:
      • async သို့မဟုတ် defer attribute များသုံးပါ (ဖော်ပြခဲ့ပြီး)။
      • ချက်ချင်းမလိုအပ်သော script များကို <body> ၏အဆုံးသို့ ရွှေ့ပါ။
      • အလွန်သေးငယ်ပြီး အရေးကြီးသော script များကို inline ထည့်ရေးပါ (သတိဖြင့်သုံးပါ)။
    • CSS အတွက်:
      • Critical CSS ကို inline ထည့်ရေးပါ (ဖော်ပြခဲ့)။
      • အရေးမကြီးသော CSS များကို asynchronously ခေါ်ပါ။
      • CSS ပမာဏကို လျှော့ချပါ။

Browser ကို အချက်ပြခြင်း - Resource Hints

Section titled “Browser ကို အချက်ပြခြင်း - Resource Hints”

HTML <head> ထဲက <link rel="..."> tag များတွင် Attributes များ ထည့်သွင်းခြင်းဖြင့် browser အား လိုအပ်လာနိုင်သော resource များအကြောင်း ကြိုတင်အချက်ပြနိုင်ပါသည်။ ဒီလိုလုပ်တာက browser ကို အလုပ်တွေ ပိုမြန်မြန်ဆန်ဆန်လုပ်နိုင်အောင် ကူညီပေးသလိုပါပဲ။

  • dns-prefetch:
    • <link rel="dns-prefetch" href="//example.com">
    • မကြာမီ လိုအပ်လာနိုင်သော resource များအတွက် အခြား website (domain) ကို DNS lookup (IP address ရှာဖွေခြင်း) ကို လုပ်ဆောင်ရန် browser ကိုကြိုပြောသည်။ (ဖုန်းမခေါ်ခင် ဖုန်းနံပါတ်ကြိုရှာထားသလိုမျိုးဖြစ်သည်။)
  • preconnect:
    • <link rel="preconnect" href="https://example.com">
    • dns-prefetch ထက်ပိုသည်။ DNS lookup လုပ်သည့်အပြင် သတ်မှတ်ထားသော domain သို့ TCP handshake နှင့် TLS negotiation အပါအဝင် connection တစ်ခုကိုပါ ကြိုတင်တည်ဆောက်သည်။ ချက်ချင်း အသုံးပြုမည့် အရေးကြီးသော third-party service များအတွက်သုံးပါ။ preconnect ကို တကယ် အရေးကြီးတဲ့ file တွေ အတွက်သာ သုံးပါ။ မဟုတ်ပါက တခြားအရေးကြီးတဲ့ file တွေ download လုပ်တာကို နှေးသွားစေနိုင်ပါတယ်။
  • preload:
    • <link rel="preload" href="/critical-script.js" as="script">
    • <link rel="preload" href="/main-image.webp" as="image">
    • “ဤဖိုင်သည် လက်ရှိ page အတွက် အလွန်အရေးကြီးပါသည်၊ ၎င်းကို ဦးစားပေးအဆင့်ဖြင့် ယခုချက်ချင်း download လုပ်ပါ” ဟု browser အား အတိအလင်း ညွှန်ကြားသည်။ as attribute က မည်သည့်ဖိုင်အမျိုးအစားဖြစ်သည်ကို ပြောသည်။
    • Browser က နောက်မှတွေ့သော်လည်း မြန်မြန်လိုအပ်သော resource များအတွက် (ဥပမာ - LCP ပုံ၊ အရေးကြီးသော font၊ အရေးပါသော script) အသုံးပြုသည်။
    • အများကြီး preload လုပ်ခြင်းက အခြားအရေးကြီးသော resource များ၏ bandwidth ကိုယူသုံးကာ performance ကိုထိခိုက်စေနိုင်သည်။ အမှန်တကယ်အရေးကြီးပြီး နောက်ကျမှတွေ့ရှိသော resource များအတွက်သာ သုံးပါ။
  • prefetch:
    • <link rel="prefetch" href="/next-page-styles.css" as="style">
    • နောက်လာမည့် navigation (ဥပမာ - user က နောက်စာမျက်နှာသို့ click သွားလျှင်) အတွက် resource တစ်ခုလိုအပ်လာနိုင်သည်ဟု browser အား အနိမ့်ဆုံးဦးစားပေးအဖြစ် အချက်ပြသည်။ Browser က အပို capacity ရှိမှသာ download လုပ်မည် ဖြစ်သည်။