Reducing the Number of DOM Elements to Speed Up Our Websites

Web Page တစ်ခု၏ တည်ဆောက်ပုံ များပြားရှုပ်ထွေး လာသည်နှင့် အမျှ အင်တာနက်ကြည့် ဆော့ဖ်ဝဲ ထိုစာမျက်နှာကို Download လုပ်ပြီး ပုံဖော်ရသည့် အချိန် ပိုကြာလာသည်။ ထို့ပြင် အသုံးပြုထားသည့် JavaScript များမှ DOM access လုပ်သည့် အချိန်ကိုလည်း ပိုမို နှေးကွေးစေသည်။ ဥပမာ - အနေဖြင့် Event Handler တစ်ခုကို DOM Elements 500 ပါသည့် စာမျက်နှာတစ်ခုနှင့် 5000 ပါသည့် စာမျက်နှာတစ်ခုတွင် ထည့်သွင်း နှိုင်းယှဉ်ကြည့် နိုင်သည်။

High Number of DOM Elements in Our Web Pages?

ကျွန်တော်တို့ ရေးသားလိုက်သည့် အင်တာနက်စာမျက်နှာတွင် DOM elements အရေအတွက် အလွန်များပြားနေပါသလား။ အကယ်၍ များနေသည်ဟု အဖြေထွက်ပါက ထိုစာမျက်နှာကို ရေးသားထားသည့် HTML markup များကို ပြန်လည် စစ်ဆေး၊ ပြင်ဆင်ရေးသားရန် လိုအပ်နေပြီ ဖြစ်သည်။ စာမျက်နှာတွင် ပါရှိသည့် အကြောင်းအရာ (Content) များကို ဖယ်ရှားခြင်း မပြုဘဲ ရေးသားထားသည့် Markup များကို ပြင်ဆင်နိုင်သည့် နည်းလမ်းများစွာ ရှိပါသည်။ တည်ဆောက်ထားသည့် HTML စာမျက်နှာများ၏ အခင်းအကျင်း Layout အတွက် Table များကို သုံးထားမိသည် ဆိုလျှင် Table မသုံးသည့် Tableless Layout အဖြစ် ပြန်လည် ပြင်ဆင်ရေးသားရန် လိုအပ်မည်။ CSS သီးသန့် အသုံးပြု ရေးသားထားသည့် တိုင်အောင် Layout ဆိုင်ရာ ပြဿနာများကို ဖြေရှင်းနိုင်ရန် အတွက် <div> များကို အလွန်အကျူးသုံးထားပါက ထို <div> များကို ပြန်လည် စစ်ဆေး ပြင်ဆင်ရန် လိုအပ်မည် ဖြစ်သည်။

Resetting Browser's Default CSS

ကျွန်တော်တို့ ရေးသားထားသည့် CSS ဖိုင်တွင် အင်တာနက်ကြည့် ဆော့ဖ်ဝဲများ၏ Default CSS setting များကို Reset ပြုလုပ်ခြင်းအားဖြင့် ကျွန်တော်တို့၏ Web Page Layout များကို ပိုမို ကောင်းမွန်လာစေရန် ဖန်တီးနိုင်သည်။ Eric Mayer ၏ CSS Reset, YUI CSS utilities များမှ grids.css, fonts.css နှင့် reset.css စသည်တို့ကို သုံးခြင်းအားဖြင့် Web Development Process ကို ပိုမိုလျင်မြန်လာစေနိုင်သည့် အပြင် သေသပ်ကောင်းမွန်သည့် Web Page များကိုလည်း ရရှိလာစေမည် ဖြစ်သည်။

Checking DOM Elements in Our Web Pages

အင်တာနက် စာမျက်နှာတစ်ခုတွင် ပါရှိသည့် DOM Elements အရေအတွက်များကို အလွယ်တကူ စစ်ဆေးနိုင်သည်။ Firefox browser တွင် Firebug add-on ကို ထည့်သွင်းထားဖို့တော့ လိုအပ်သည်။ ကြည့်နေသည့် အင်တာနက်စာမျက်နှာတစ်ခုတွင် ပါရှိသည့် DOM Element အရေအတွက်ကို စစ်ဆေးလိုပါက Firebug Console တွင် document.getElementsByTagName('*').length ကို ရိုက်ထည့်ပြီး ကြည့်နိုင်သည်။

အကယ်၍ သင်ဖန်တီးထားသည့် အင်တာနက်စာမျက်နှာတွင် DOM Elements များ အလွန်များနေပါက Markup ကောင်းကောင်းဖြင့် ဖန်တီးထားသည့် အခြားသူများ၏ အင်တာနက်စာမျက်နှာများမှ HTML markup များကို လေ့လာနိုင်သည်။ ပညာယူနိုင်သည်။ မိမိ၏ ဝက်ဘ်ဆိုက်မှာ လျင်မြန်သည့် ဝက်ဘ်ဆိုက်တစ်ခု ဖြစ်နေပါက ဝက်ဘ်ဆိုက်သို့ လာရောက်လည်ပတ် ကြည့်ရှုသူများ၏ စိတ်ချမ်းမြေ့ ပျော်ရွှင်မှုကို ရရှိနိုင်မည် ဖြစ်ပေသည်။

For More Information

Reference - http://developer.yahoo.com/performance/rules.html#min_dom
Document Object Model - http://en.wikipedia.org/wiki/Document_Object_Model
Document Object Model (DOM) - http://www.w3.org/DOM/
Comparison of layout engines (Document Object Model)