Using External JavaScript and CSS - JavaScript နှင့် CSS ဖိုင်များကို ပြင်ပမှ ရယူအသုံးပြုခြင်း

အဓိက အကြောင်းအရာ - javascript, css
၀က်ဘ်ဆိုက်တစ်ခုကို လျင်မြန်စေသည့် အကြောင်းရင်းများစွာတွင် ပြင်ပမှ အစိတ်အပိုင်းများ (External Components) များကို ကိုင်တွယ် အသုံးချ စီမံခန့်ခွဲတတ်မှုလည်း ပါ၀င်သည်။ JavaScript နှင့် CSS ဖိုင်များကို

• ပြင်ပမှခေါ်ယူအသုံးပြုခြင်း (External) နှင့်
• စာမျက်နှာအတွင်း မြုပ်နှံထည့်သွင်း အသုံးပြုခြင်း (Inlined in the page) ဟူ၍ နည်းလမ်း နှစ်ခု ရှိသည်။

Web Developer များအနေဖြင့် ထိုနည်းနှစ်ခုအနက် မည်သည့်နည်းကို အသုံးပြုမည်ကို  အခြေခံအချက် တစ်ခုအဖြစ် ထည့်သွင်းစဉ်းစားကြရသည်။

လက်တွေ့တွင် JavaScript နှင့် CSS ဖိုင်များကို ပြင်ပမှ ခေါ်ယူအသုံးပြုခြင်းဖြင့် ၀က်ဘ်ဆိုက်တစ်ခု၏ အမြန်နှုံးကို ပိုမိုလျင်မြန်စေကြောင်း၊ စာမျက်နှာများ ပေါ်ပေါက်လာမှုကို ပိုမို မြန်ဆန်စေကြောင်း တွေ့ရှိကြရသည်။ အဓိက အကြောင်းမှာ JavaScript နှင့် CSS ဖိုင်များကို အင်တာနက်ကြည့်ဆော့ဖ်၀ဲ (Web browser) များက ခေတ္တသိမ်းဆည်းအသုံးပြုခြင်း (Caching) ကြောင့် ဖြစ်သည်။ HTML ဖိုင်များအတွင်း မြုပ်နှံထည့်သွင်း ထားသည့် Inline JavaScript နှင့် CSS များကိုမူ Cache လုပ်မထား သည့်အတွက်  ထို HTML ဖိုင်အား ပြသလိုသည့် အချိန်တိုင်းတွင် Download ပြန်လုပ်ရသည်။ ဤနည်းသည် HTTP request အရေအတွက်ကို လျော့ချပေးနိုင်သော်လည်း၊ HTML ဖိုင်၏ အရွယ်အစားကို တိုးလာစေသည်။ အခြားတစ်ဘက်တွင်မူ JavaScript နှင့် CSS ဖိုင်များကို အင်တာနက်ကြည့်ဆော့ဖ်၀ဲ အတွင်း ခေတ္တသိုလှောင် သိမ်းဆည်းအသုံးပြုခြင်း (Caching) အားဖြင့်၊ HTTP request အရေအတွက်ကိုလည်း တိုးမလာစေရန် ထိန်းထားနိုင်သကဲ့သို့၊ HTML ဖိုင်များ၏ အရွယ်အစားကိုလည်း လျော့ချပေးနိုင်ပေသည်။

ဤနေရာတွင် အဓိကကျသည့် သော့ချက်မှာ တောင်းဆိုရမည့် HTML ဖိုင်အရေအတွက်နှင့် ခေတ္တသိုလှောင်ထားရမည့် JavaScript နှင့် CSS ဖိုင်များ၏ ဆက်နွယ်မှု အချိုးအစား ဖြစ်သည်။ ထိုအချိုးအစားကို အလွယ်တကူ တိုင်းတာရရှိရန် ခက်ခဲသည်။ အကယ်၍ ၀က်ဘ်ဆိုက်တစ်ခုကို လာရောက်ကြည့်ရှုသူများ၏ ကြည့်ရှုသည့် စာမျက်နှာ အရေအတွက်များပြီး၊ ထိုစာမျက်နှာများတွင်လည်း တူညီသော CSS နှင့် JavaScript ဖိုင်များကိုသာ အသုံးပြုထားပါက၊ အင်တာနက်ကြည့်ဆော့ဖ်၀ဲမှ ခေတ္တသိမ်းဆည်း အသုံးပြုခြင်းကြောင့် အမြန်နှုံးပိုမို တိုးတက်လာမည် ဖြစ်ပေသည်။

Figure - Using External CSS file for all the pages in a web site

၀က်ဘ်ဆိုက်အများစုအတွက် CSS နှင့် JavaScript ဖိုင်များကို အပြင်ဘက်တွင် ထားရှိတည်ဆောက်ခြင်းက အကောင်းဆုံး အဖြေဖြစ်ကြောင်း တွေ့ရှိရသည်။ Inline CSS နှင့် JavaScript များကို ခြွင်းချက် အနေဖြင့် အသုံးပြုသင့်သည့် နေရာတစ်ခုမှာ ၀က်ဘ်ဆိုက်၏ မူလစာမျက်နှာ (Home page) ဖြစ်သည်။ ဥပမာအားဖြင့် Yahoo! ၏ Home page နှင့် My Yahoo! တို့တွင် Inline CSS နှင့် JavaScript များကို သုံးထားသည်။ Google ၏ home page တွင်လည်း Inline CSS နှင့် JavaScript တို့ကို အသုံးပြုထားကြောင်း အောက်ပါပုံတွင် မြင်နိုင်သည်။ ၀က်ဘ်ဆိုက်တစ်ခု၏ home page များကို လာရောက်သူတစ်ဦးလျှင် အများဆုံး တစ်ကြိမ်သာ ပျမ်းမျှအသုံးပြုလေ့ ရှိသည်။ ထိုအခြေအနေတွင် JavaScript နှင့် CSS ဖိုင်များကို စာမျက်နှာအတွင်း ထည့်သွင်း တည်ဆောက်ထားခြင်း အားဖြင့် ၀က်ဘ်ဆိုက်ကို အသုံးပြုမည့်သူများအတွက် လျင်မြန်မှုကို ခံစား သိရှိနိုင်မည် ဖြစ်ပေသည်။

၀က်ဘ်ဆိုက်တစ်ခု၏ ပထမဆုံးစာမျက်နှာသည် နောက်လာမည့် စာမျက်နှာများစွာအတွက် အစနေရာ ဖြစ်သည်။ ထို့ကြောင့် ပထမစာမျက်နှာ (မူလ စာမျက်နှာ - home page) ကို အလျင်အမြန်ဆုံး ပုံဖော်ပြသ နိုင်ရန်အတွက်

• ပထမစာမျက်နှာ အတွင်း Inline CSS နှင့် JavaScript များကို အသုံးပြုပြီး၊
• အခြားစာမျက်နှာများတွင် အသုံးပြုရန်အတွက် အင်တာနက်ကြည့်ဆော့ဖ်၀ဲမှ Cache ပြုလုပ်သိမ်းဆည်း ပုံဖော်နိုင်သည့် External CSS နှင့် JavaScript ဖိုင်များကို ထိရောက်စွာ အသုံးပြုခြင်းနည်းအားဖြင့်

Web Developer တစ်ဦးအနေဖြင့် မိမိ၏ ၀က်ဘ်ဆိုက် အမြန်နှုံးတိုးတက်ရေးအတွက် နည်းလမ်းတစ်ခု အနေဖြင့် ဆောင်ရွက်နိုင်မည် ဖြစ်ပေသည်။

REF: http://developer.yahoo.com/performance/rules.html#external
IMAGE: http://desource.uvu.edu/dgm/2120/IN/steinja/lessons/06/images/external-c...