Making Ajax Cacheable to Increase Web Site Speed

အဓိက အကြောင်းအရာ - Content
Ajax ကို သုံးရသည့်အတွက် သိသာထင်ရှားသည့် အကျိုးအမြတ်တစ်ခုမှာ - User ၏ လုပ်ဆောင်မှု တစ်ခုအတွက် ပြန်လည်တုန့်ပြန်ရမည့် အလုပ်များ (Instantaneous Feedback) အားလုံးကို Backend Web Server ဆီသို့ ဆက်သွယ်ရယူပြီး (Requests information asynchronously) ပြန်လည် ဖော်ပြပေးနိုင်သည့် အတွက် ဖြစ်သည်။ သို့သော် ပြဿနာ တစ်ခုမှာ - JavaScript နှင့် XML response များ User ၏ မြင်ကွင်းဆီသို့ ပြန်လည် ရောက်ရှိမလာမီ၊ User က စောင့်ဆိုင်းနေရသည့် အချိန်တွင်၊ User များ နောက်ထပ် အခြားနေရာတစ်ခုဆီသို့ ထွက်ခွာသွားနိုင်သည့် အခြေအနေကို မတားဆီးနိုင်ခြင်း ဖြစ်သည်။

Web application အများစုတွင်၊ ပြန်လည်ဖော်ပြမည့် တုန့်ပြန်မှုကို User များက စောင့်/မစောင့် ဆိုသည့် အခြေအနေသည် AJAX ကို မည်သို့ မည်ပုံ အသုံးပြုထားသနည်း ဆိုသည့် အချက်အပေါ်တွင် များစွာမူတည်လေသည်။ ဥပမာ - Web based email client တစ်ခုတွင် User အနေဖြင့် တစ်ခုခုကို ရှာလိုက်သည့်အခါ၊ အဖြေများ ပြန်ပေါ်မလာမခြင်း - ၄င်းအနေဖြင့် စောင့်နေရမည် ဖြစ်သည်။ ဤနေရာတွင် asynchronous နှင့် instantaneous မတူသည်ကို သတိပြုဖို့ အရေးကြီး ပါသည်။

Caching AJAX Responses

Web site တစ်ခု၏ စွမ်းဆောင်ရည်ကို တိုးတက်စေရန်အတွက် Ajax response များကို ကောင်းသည်ထက်ကောင်းအောင် ဖန်တီးဖို့ လိုအပ်သည်။ အရေးအကြီးဆုံး နည်းလမ်းမှာ AJAX response များကို ခေတ္တသိမ်းဆည်းခြင်း (Caching) ပြုလုပ်နိုင်စေရန် ဖန်တီးထားခြင်း ဖြစ်သည်။ ယခု အချိန်အထိ ဆွေးနွေးလာသမျှ အကြောင်းအရာများ ထဲမှ အောက်ပါနည်းလမ်းများကို Ajax response များ လျင်မြန်စေရန် အတွက် အသုံးပြုနိုင်သည်။ (Image source: w3.org)

• Add an Expires or a Cache-Control Header
• Gzipping (Compressing) Components of the Web Pages
• Reduce DNS Lookups to improve web site performance
• Minifying JavaScript And CSS to Improve Websites Performance
• Avoid 301 Website Link Redirect
• Configure/Remove ETags to improve web site performance

AJAX Caching Example

ဥပမာ တစ်ခုဖြင့် လေ့လာကြည့်ကြစို့။ Web 2.0 email client တစ်ခုသည် Auto Completion ပြုလုပ်ရန်အတွက် User ၏ Address book ကို ဒေါင်းလုတ် ချရသည်။ အကယ်၍ ထို Web mail application ၏ Ajax response များကို future Expires သို့မဟုတ် Cache-Control header တစ်ခုခုဖြင့် Caching လုပ်နိုင်အောင် ဖန်တီးထားသည် ဆိုလျှင် ၊ user တစ်ဥိးက ၄င်း web mail application ကို အသုံးပြုသည့်အခါ - နောက်ဆုံး အသုံးပြုခဲ့စဉ် အချိန်က သူ၏ Address book တွင် အသစ်ထည့်ခြင်း ပြင်ဆင်ခဲ့ခြင်းများ မရှိခဲ့ပါလျှင်၊ Web server ၏ Cache ထဲတွင် သိမ်းဆည်းထားသည့် Address book response အဟောင်းကိုပင် ပြန်လည် ခေါ်ယူ အသုံးပြု ဖော်ပြပေးနိုင်သည်။ Cache လုပ်ထားသည့် Address book အဟောင်းကို ဆက်သုံးရန် သို့မဟုတ် အသစ်ထပ်တောင်းရန် ဆိုသည့် အချက်ကို အင်တာနက်ကြည့်ဆော့ဖ်၀ဲ (Browser) က သတင်းပေးရသည်။ ဤလုပ်ငန်း အကောင်အထည်ပေါ်စေရန်အတွက် User က သူ၏ Address book ကို ပြင်ဆင်မှု တစ်ခုခုလုပ်လိုက်သည့် အချိန် (Timestamp) ကို Address Book ၏ AJAX url တွင် ပေါင်းထည့်ပေးလိုက်သည်။ (ဥပမာ - &t=1190241612)

AJAX Caching & Web Site Speed

User အနေဖြင့် နောက်ဆုံးသုံးခဲ့စဉ်အချိန်က သူ၏ Address book တွင် အပြောင်းအလဲ လုပ်မထားခဲ့လျှင် Timestamp တွင် အပြောင်းအလဲ မရှိသည့်အတွက် Address book ကို Web server မှ ဒေါင်းလုတ်ပြန်မလုပ်တော့ဘဲ၊ အင်တာနက်ကြည့်ဆော့ဖ်၀ဲ၏ Cache အတွင်းမှ ခေါ်သုံးမည် ဖြစ်သည်။ ထို့ကြောင့် မလိုအပ်သည့် HTTP request များကို အလိုအလျောက် လျော့ချပြီး ဖြစ်ကာ ၀က်ဘ်ဆိုက်၏ အမြန်နှုံး တက်လာသည်။
အကယ်၍ User သည် သူ၏ Address Book တွင် အပြောင်းအလဲတစ်ခုခု လုပ်လိုက်ပါက Timestamp အသစ်ပြောင်းသွားပြီ ဖြစ်သည့်အတွက် URL အသစ်နှင့် Cache response တို့ကြား တူညီမှု ရှိတော့မည် မဟုတ်ပေ။ ထို့ကြောင့် အင်တာနက်ကြည့်ဆော့ဖ်၀ဲ အနေဖြင့် Update လုပ်ထားသည့် Address book entry များကို Server မှ ထပ်မံ တောင်းဆို ရတော့မည် ဖြစ်သည်။ (Image source : openajax.org)

AJAX response များကို Dynamically ချက်ချင်း ဖန်တီးထားပြီး Single user တစ်ဦးချင်းစီအတွက် အသုံးပြုနိုင်သော်လည်း၊ ၄င်းတို့ကို Cache လုပ်ပြီး သုံးနိုင်ဆဲ ဖြစ်သည်။ ဤနည်းအားဖြင့် AJAX လုပ်ဆောင်ချက်များကို Cache လုပ်နိုင်သည့် အတွက် Web 2.0 Application များကို ပိုမို လျင်မြန်လာစေသည်။

REF - http://developer.yahoo.com/performance/rules.html#cacheajax

For Myanmar Readers, here are some blog posts regarding to AJAX in Burmese language

AJAX နည်းပညာအကြောင်း ရေးသားထားသည့် မြန်မာ Blog နှင့် Web site များ

Tutorials about AJAX from http://www.zack-notes.net/ (Previous Thadarphyu.net )

• AJAX Intro
• AJAX XMLHttpRequest
• XMLHttpRequest Object readyState property
• AJAX Suggest Sample

• Myanmar IT Resource               Ajax အကြောင်းသိကောင်းစရာ
• Kaung Myat Htun               Ajax နည်းပညာ မိတ်ဆက်
• Mysteryzillion (Myanma IT Forum)         Ready Made AJAX
• From Ma Nay Nay Naing blog        AJAX and I

AJAX in foreign language

• Wikipedia (AJAX)
• Xula
• Dmoz
• OpenAJAX web site

Slideshows about AJAX from Slideshare

• When Ajax Attacks! Web application security fundamentals
• High Performance Ajax Applications
• How to make Ajax work for you

AJAX from YouTube

• AJAX Tutorial 1 - Introduction
• AJAX Tutorial 2 - System Requirements
• Ajax Tutorial 3 - Getting to know Ajax
• Introduction to Debugging AJAX Application with Firebug

Dear friends, if you have any links to add more, feel free to add in the comments,... thanks.   
သူငယ်ချင်းတို့ရော AJAX အကြောင်းရေးထားတဲ့ အခြားလိပ်စာတွေ ရှိရင်လည်း မှတ်ချက်ထဲမှာ ဖြည့်စွက် ပေးသွားကြစေချင်ပါတယ်...