Virtual Dom ဘာလဲ ဘယ်လဲ?

Virtual DOM ဆိုတာကို developer ကြီးတို့ မကြာခဏ ကြားဖူးကြမှာပါ။ ဆိုတော့ Virtual DOM ဆိုတာဘာကြီးလဲ? ဘာကြောင့် Virtual DOM ကိုသုံးကြတာလဲ?

Virtual DOM ဆိုတာက real DOM ကြောင့်ဖြစ်တဲ့ page reflow တွေ repaint တွေနဲ့ context switching တွေကိုတတ်နိုင်သမျှလျှော့ချဖို့အတွက်သုံးတဲ့ concept တစ်ခုပဲ။ real DOM ရဲ့ lightweight copy လို့ပြောလို့ရတယ်။

ဟုတ်ပြီ ခုနကပြောတဲ့ real DOM ကြောင့် ဖြစ်တဲ့ page reflow တွေ repaint တွေ context switching တွေဆိုတာဘာတွေလဲပေါ့ ဘာကြောင့် real DOM ကနှေးလဲပေါ့

ကျနော်တို့ web page တစ်ခုကို user က request လုပ်လိုက်ပြီဆိုတာနဲ့ ပြန်ရလာတဲ့ html document ကြီးကို rendering engine ကနေ parsing စလုပ်ပါတယ် html ကို parse လုပ်တာကနေ DOM tree(Document Object Model tree) ရတယ် stylesheet ကို parse လုပ်တာကနေ CSSOM tree(CSS Object Model tree)ရပါတယ်။ဒီနှစ်ခုပေါင်းပြီး render tree ရတယ်ပေါ့။render tree ရတာနဲ့ rendering engine က layout process ကိုလုပ်ရတယ် ဘယ် element ကတော့ ဘယ်နေရာမှာပေါ်ရမယ် ဘယ် element ကတော့ width ဘယ်လောက် ဒါမျိူး layout ချတာကိုပြောတာ။ layout process ပြီးရင်တော့ painting လုပ်ရတယ်ပေါ့

ဆိုတော့ ကျနော်တို့က element တစ်ခုရဲ့ width ကိုပြောင်းလိုက်တာနဲ့ rendering engine က အဲ့ element ကို ငုံထားတဲ့ကောင်တွေကိုပါပြန်ပြီး recalculate လုပ်ရတယ် layout ပြန်ချရတယ် painting ပြန်လုပ်ရတယ် ဒါကို page reflow ဖြစ်တယ် repaint ဖြစ်တယ်လို့ခေါ်တာ

နောက်တစ်ခုက JavaScript code တွေက JavaScript engine ပေါ်မှာ အလုပ်လုပ်တယ် browser ကသုံးခွင့်ပေးထားတဲ့ DOM api တွေကတော့ rendering engine ကနေ အလုပ်လုပ်တယ် အဲ့တော့ JavaScript ကနေ DOM manipulation လုပ်မယ် DOM api တွေသုံးမယ်ဆိုရင် JavaScript engine ကနေ rendering engine ကို context switching လုပ်ရတယ်။ဒါတွေကြောင့် DOM ကနှေးတယ်ပေါ့

Virtual DOM ကျတော့ JavaScript ရဲ့ plain object တွေကိုပဲ manipulate လုပ်ရတာမလို့ JavaScript engine ပေါ်မှာပဲအလုပ်လုပ်တယ် real DOM ကိုသွားထိစရာမလိုတော့ဘူး rendering engine ဘက်ကို context switching လုပ်စရာမလိုတော့ဘူး

နောက်ပြီး React မှာဆိုရင် reconciliation algorithm ကိုသုံးပြီး UI changes တွေကိုပိုမြန်အောင်လုပ်တယ် page reflow တွေကို လျှော့ချတယ်။ ဒါတွေကြောင့် Virtual DOM ကိုသုံးတာ Virtual DOM ကို မသုံးပဲ page reflow နည်းအောင်ရေးလို့ရလားဆိုတော့ရတယ် ရပေမယ့် developer ကိုယ်တိုင်က ဘယ်လိုရေးရင် page reflow နည်းမယ်ဆိုပြီး သိထားရမယ် အဲ့အတွက်လည်း ဂရုစိုက်ပြီးရေးနေရမယ် လက်ဝင်တယ်ပေါ့ အဲ့အစား React လိုကောင်မျိုးသုံးလိုက်တာက page reflow ကိစ္စ ကိုစိတ်ပူစရာမလိုပဲ development process ကိုပိုမြန်‌သွားစေတယ်ပေါ့ဗျာ(page reflow ကိစ္စက လုံးဝပြေလည်သွားတာမျိုးမဟုတ်ဘူးနော် လျော့ပဲလျော့သွားမှာ)