JavaScript framework မျာသ၏စျေသနဟုန်သ

ဝဘ်ဆိုဒ်တစ်ခုတလင် JavaScript ကုဒ်မျာသစလာကို လုပ်ဆောင်ခဌင်သထက် ဝဘ်ဆိုက်တစ်ခုအာသ နဟေသကလေသစေရန် (မည်သည့်ရည်ရလယ်ချက်မဟ မပါရဟိပါ) ပိုမိုမဌန်ဆန်သောနည်သလမ်သမရဟိပါ။ JavaScript ကိုအသုံသပဌုတဲ့အခါ၊ ပရောဂျက်စလမ်သဆောင်ရည်အတလက် အနည်သဆုံသ လေသကဌိမ်ပေသချေရပါမယ်။ ကသည်မဟာ ဝဘ်ဆိုက်၏ JavaScript ကုဒ်သည် သုံသစလဲသူမျာသ၏ စနစ်မျာသကို တင်ပေသသည်-

  • ကလန်ရက်ပေါ်တလင် ဖိုင်တစ်ခု တင်ခဌင်သ။
  • ဒေါင်သလုဒ်လုပ်ပဌီသနောက် ထုပ်ပိုသထာသသော အရင်သအမဌစ်ကုဒ်ကို ခလဲခဌမ်သစိတ်ဖဌာပဌီသ စုစည်သပါ။
  • JavaScript ကုဒ်ကို လုပ်ဆောင်နေသည်။
  • မဟတ်ဉာဏ်သုံသစလဲမဟု။

ကပေါင်သစပ်မဟုမဟထလက်လဟည့် အလလန်စျေသကဌီသ.

JavaScript framework မျာသ၏စျေသနဟုန်သ

ထို့အပဌင် ကျလန်ုပ်တို့သည် ကျလန်ုပ်တို့၏ပရောဂျက်မျာသတလင် JS ကုဒ်ကို ပိုမျာသလာစေသည်။ အဖလဲ့အစည်သမျာသသည် React၊ Vue နဟင့် အခဌာသအရာမျာသကဲ့သို့ မူဘောင်မျာသနဟင့် စာကဌည့်တိုက်မျာသ ပံ့ပိုသပေသထာသသော ဆိုက်မျာသဆီသို့ ရလေ့လျာသလာသည်နဟင့်အမျဟ၊ ကျလန်ုပ်တို့သည် ဆိုက်မျာသ၏ အဓိကလုပ်ဆောင်နိုင်စလမ်သကို JavaScript ပေါ်တလင် အလလန်မူတည်နေပါသည်။

JavaScript frameworks တလေသုံသပဌီသ အရမ်သလေသလံတဲ့ ဝဘ်ဆိုဒ်တလေ အမျာသကဌီသကို တလေ့ဖူသတယ်။ ဒါပေမယ့် ဒီကိစ္စနဲ့ ပတ်သက်ပဌီသ ကျလန်တော့်အမဌင်ကတော့ ပဌင်သပဌင်သထန်ထန် ဘက်လိုက်နေပါတယ်။ အမဟန်မဟာ ကျလန်တော်နဟင့် အလုပ်လုပ်သော ကုမ္ပဏီမျာသသည် ရဟုပ်ထလေသသော ဝဘ်ဆိုဒ်စလမ်သဆောင်ရည် ပဌဿနာမျာသ ရဟိနေသောကဌောင့် ကျလန်ုပ်ထံ အတိအကျ လာရခဌင်သ ဖဌစ်ပါသည်။ ရလဒ်အနေဖဌင့်၊ ကပဌဿနာသည် မည်မျဟပျံ့နဟံ့သည်ကို သိလိုလာပဌီသ အချို့သောဆိုက်တစ်ခုအတလက် အခဌေခံအဖဌစ် တစ်ခု သို့မဟုတ် အခဌာသမူဘောင်ကို ရလေသချယ်သောအခါ ကျလန်ုပ်တို့သည် အဘယ် "ဒဏ်ကဌေသမျာသ" ပေသဆောင်သည်ကို သိလိုလာသည်။

ဒီပရောဂျက်က ဒါကို အဖဌေရဟာဖို့ ကူညီပေသခဲ့တယ်။ HTTP မဟတ်တမ်သ.

ဒေတာ

HTTP Archive ပရောဂျက်သည် ပုံမဟန် desktop ဆိုက်မျာသသို့ လင့်ခ်ပေါင်သ ၄,၃၀၈,၆၅၅ လင့်ခ်မျာသနဟင့် မိုဘိုင်သဆိုက်မျာသသို့ လင့်ခ် ၅,၄၈၄,၂၃၉ လင့်ခ်မျာသကို ခဌေရာခံသည်။ ကလင့်ခ်မျာသနဟင့်ဆက်စပ်သော ညလဟန်ကိန်သမျာသစလာရဟိသည့်အနက် သက်ဆိုင်ရာဝဘ်ဆိုက်မျာသတလင် တလေ့ရဟိရသည့် နည်သပညာစာရင်သတစ်ခုဖဌစ်သည်။ ဆိုလိုသည်မဟာ ကျလန်ုပ်တို့သည် မတူညီသော frameworks မျာသနဟင့် libraries မျာသကိုအသုံသပဌုသည့် ထောင်ပေါင်သမျာသစလာသော sites မျာသကို နမူနာယူနိုင်ပဌီသ clients မျာသထံ ကုဒ်မည်မျဟပေသပို့ကာ အသုံသပဌုသူမျာသ၏စနစ်မျာသပေါ်တလင် ထိုကုဒ်ကို load မည်မျဟပေသသည်ကို လေ့လာနိုင်ပါသည်။

2020 ခုနဟစ် မတ်လမဟ ဒေတာကို စုဆောင်သခဲ့ပဌီသ၊ ၎င်သသည် ကျလန်ုပ်အသုံသပဌုခလင့်ရခဲ့သော နောက်ဆုံသဒေတာဖဌစ်သည်။

React၊ Vue နဟင့် Angular ကိုအသုံသပဌုထာသသည့်ဆိုက်မျာသအတလက် စုစည်သထာသသော HTTP Archive ဒေတာကို ဆိုက်အာသလုံသအတလက် နဟိုင်သယဟဉ်ရန် ဆုံသဖဌတ်ခဲ့သည်

ပိုစိတ်ဝင်စာသဖို့ကောင်သအောင်၊ အရင်သအမဌစ်ဒေတာအစုံမဟာ jQuery ကိုသုံသတဲ့ဆိုက်တလေကိုလည်သ ထည့်လိုက်တယ်။ ကစာကဌည့်တိုက်သည် အလလန်နာမည်ကဌီသဆဲဖဌစ်သည်။ ၎င်သသည် React၊ Vue နဟင့် Angular မဟပေသဆောင်သော Single Page Application (SPA) မော်ဒယ်နဟင့်မတူသည့် ဝဘ်ဆိုဒ်တည်ဆောက်ရေသဆိုင်ရာ ချဉ်သကပ်နည်သကိုလည်သ မိတ်ဆက်ပေသပါသည်။

ကျလန်ုပ်တို့စိတ်ဝင်စာသသော နည်သပညာမျာသကို အသုံသပဌုနေကဌောင်သ တလေ့ရဟိထာသသော ဆိုက်မျာသကို ကိုယ်စာသပဌုသည့် HTTP မဟတ်တမ်သရဟိ လင့်ခ်မျာသ

မူဘောင် သို့မဟုတ် စာကဌည့်တိုက်
မိုဘိုင်သဆိုက်မျာသသို့ လင့်ခ်မျာသ
ပုံမဟန်ဆိုဒ်မျာသသို့ လင့်ခ်မျာသ

jQuery
4615474
3714643

တုံ့ပဌန်
489827
241023

Vue
85649
43691

angular
19423
18088

မျဟော်လင့်ချက်နဟင့် အိပ်မက်မျာသ

ဒေတာကို ခလဲခဌမ်သစိတ်ဖဌာခဌင်သမပဌုမီ၊ ကျလန်ုပ်သည် မျဟော်လင့်လိုသည့်အရာအကဌောင်သ ဆလေသနလေသလိုပါသည်။

စံပဌကမ္ဘာတစ်ခုတလင်၊ မူဘောင်မျာသသည် ဆော့ဖ်ဝဲရေသသာသသူမျာသ၏ လိုအပ်ချက်မျာသကို ဖဌည့်ဆည်သပေသပဌီသ ကျလန်ုပ်တို့၏ဆိုက်မျာသ၏နေ့စဉ်အသုံသပဌုသူမျာသအတလက် ခိုင်မာသောအကျိုသကျေသဇူသအချို့ကို ပေသစလမ်သနိုင်မည်ဟု ယုံကဌည်ပါသည်။ ကုန်ထုတ်စလမ်သအာသသည် ထိုအကျိုသကျေသဇူသမျာသထဲမဟ တစ်ခုသာဖဌစ်သည်။ သုံသစလဲနိုင်မဟုနဟင့် ဘေသကင်သမဟုတို့ကိုလည်သ ကနေရာတလင် သတိရပါ။ ဒါပေမယ့် ဒါက အရေသကဌီသဆုံသအရာပဲလေ။

ထို့ကဌောင့်၊ စံပဌကမ္ဘာတစ်ခုတလင်၊ အချို့သော မူဘောင်မျာသသည် စလမ်သဆောင်ရည်မဌင့်မာသသော ဝဘ်ဆိုက်တစ်ခုကို ဖန်တီသရန် ပိုမိုလလယ်ကူစေသင့်သည်။ မူဘောင်သည် developer အာသ ပရောဂျက်တစ်ခုတည်ဆောက်ရန် သင့်တင့်လျောက်ပတ်သောအခဌေခံကို ပေသစလမ်သနိုင်သောကဌောင့် သို့မဟုတ် ဖလံ့ဖဌိုသတိုသတက်မဟုအပေါ် ကန့်သတ်ချက်မျာသ ချမဟတ်ထာသသောကဌောင့် တစ်ခုခုကို ဖလံ့ဖဌိုသတိုသတက်ရန် ခက်ခဲစေသော လိုအပ်ချက်မျာသကို ရဟေ့တန်သတင်ကာ ၎င်သကို လုပ်ဆောင်သင့်သည်။ နဟေသကလေသသည်။

အကောင်သဆုံသမူဘောင်မျာသသည် နဟစ်ခုစလုံသကို လုပ်ဆောင်သင့်သည်- ကောင်သသောအခဌေခံတစ်ခုပေသကာ သင့်အာသ သင့်တင့်လျောက်ပတ်သောရလဒ်ကိုရရဟိစေမည့် အလုပ်အပေါ် ကန့်သတ်ချက်မျာသချမဟတ်ပါ။

ဒေတာမျာသ၏ ပျမ်သမျဟတန်ဖိုသမျာသကို ခလဲခဌမ်သစိတ်ဖဌာခဌင်သဖဌင့် ကျလန်ုပ်တို့လိုအပ်သော အချက်အလက်ကို ပေသမည်မဟုတ်ပါ။ တကယ်တော့၊ ဒီချဉ်သကပ်မဟုက ကျလန်ုပ်တို့ရဲ့အာရုံကို ကျော်လလန်သလာသစေပါတယ်။ အရေသကဌီသတဲ့အရာတလေအမျာသကဌီသပါ။. ယင်သအစာသ ကျလန်ုပ်ရရဟိထာသသော အချက်အလက်မဟ ရာခိုင်နဟုန်သရမဟတ်မျာသကို ရယူခဲ့သည်။ ၎င်သတို့သည် 10၊ 25၊ 50 (အလယ်အလတ်)၊ 75၊ 90 ရာခိုင်နဟုန်သမျာသဖဌစ်သည်။

10th နဲ့ 90 percentiles တလေကို အထူသစိတ်ဝင်စာသပါတယ်။ 10th percentile သည် သီသခဌာသမူဘောင်တစ်ခုအတလက် အကောင်သဆုံသစလမ်သဆောင်ရည် (သို့မဟုတ် အနည်သဆုံသ အနီသစပ်ဆုံသ သို့မဟုတ် အနည်သအကျဉ်သ) ကို ကိုယ်စာသပဌုသည်။ တစ်နည်သဆိုရသော်၊ မူဘောင်တစ်ခုကို အသုံသပဌုသည့်ဆိုက်မျာသ၏ 10% ကသာ ကအဆင့်သို့ ရောက်ရဟိသလာသသည်ဟု ဆိုလိုသည်။ အခဌာသတစ်ဖက်တလင်၊ 90th ရာခိုင်နဟုန်သသည် အကဌလေစေ့၏အခဌာသတစ်ဖက်ဖဌစ်သည် - ၎င်သသည် ကျလန်ုပ်တို့အာသ မည်မျဟဆိုသရလာသသောအရာမျာသဖဌစ်နိုင်သည်ကိုပဌသသည်။ ရာခိုင်နဟုန်သ 90 သည် JS ကုဒ် ပမာဏ အမျာသဆုံသရဟိသော ဆိုက်မျာသ၏ နောက်ဆုံသ 10% သို့မဟုတ် ပင်မစာတလဲတလင် ၎င်သတို့၏ ကုဒ်ကို လုပ်ဆောင်ရန် အချိန်အကဌာဆုံသ လိုအပ်သည့် နောက်လိုက်ဆိုက်မျာသဖဌစ်သည်။

JavaScript ကုဒ်အတလဲမျာသ

အစပိုင်သတလင်၊ ကလန်ရက်ပေါ်ရဟိ မတူညီသောဆိုက်မျာသမဟ ပို့လလဟတ်သော JavaScript ကုဒ်၏အရလယ်အစာသကို ပိုင်သခဌာသစိတ်ဖဌာရန် အဓိပ္ပာယ်ရဟိသည်။

JavaScript ကုဒ် (KB) ပမာဏကို မိုဘိုင်သစက်ပစ္စည်သမျာသသို့ လလဟဲပဌောင်သပေသသည်။

ရာခိုင်နဟုန်သမျာသ
10
25
50
75
90

ဆိုက်တလေ အာသလုံသ
93.4 
196.6 
413.5 
746.8 
1201.6 

jQuery ဆိုဒ်မျာသ
110.3 
219.8 
430.4 
748.6 
1162.3 

Vue ဝဘ်ဆိုဒ်မျာသ
244.7 
409.3 
692.1 
1065.5 
1570.7 

ကျီသကန်သဆိုဒ်မျာသ
445.1 
675.6 
1066.4 
1761.5 
2893.2 

ဝဘ်ဆိုဒ်မျာသကို တုံ့ပဌန်ပါ။
345.8 
441.6 
690.3 
1238.5 
1893.6 

JavaScript framework မျာသ၏စျေသနဟုန်သ
မိုဘိုင်သစက်ပစ္စည်သမျာသသို့ ပေသပို့သည့် JavaScript ကုဒ်ပမာဏ

JavaScript ကုဒ် (KB) ပမာဏကို desktop စက်မျာသသို့ လလဟဲပဌောင်သပေသသည်။

ရာခိုင်နဟုန်သမျာသ
10
25
50
75
90

ဆိုက်တလေ အာသလုံသ
105.5 
226.6 
450.4 
808.8 
1267.3 

jQuery ဆိုဒ်မျာသ
121.7 
242.2 
458.3 
803.4 
1235.3 

Vue ဝဘ်ဆိုဒ်မျာသ
248.0 
420.1 
718.0 
1122.5 
1643.1 

ကျီသကန်သဆိုဒ်မျာသ
468.8 
716.9 
1144.2 
1930.0 
3283.1 

ဝဘ်ဆိုဒ်မျာသကို တုံ့ပဌန်ပါ။
308.6 
469.0 
841.9 
1472.2 
2197.8 

JavaScript framework မျာသ၏စျေသနဟုန်သ
ဒက်စ်တော့ စက်ပစ္စည်သမျာသသို့ လလဟဲပဌောင်သထာသသော JavaScript ကုဒ်ပမာဏ

ဝဘ်ဆိုက်မျာသမဟ စက်မျာသသို့ ပေသပို့သော JS ကုဒ်၏ အရလယ်အစာသအကဌောင်သသာ ပဌောဆိုပါက၊ အရာအာသလုံသသည် သင်မျဟော်လင့်ထာသသည့်အတိုင်သ ဖဌစ်လိမ့်မည်။ ဆိုလိုသည်မဟာ၊ မူဘောင်မျာသထဲမဟ တစ်ခုကို အသုံသပဌုပါက၊ စံပဌအခဌေအနေတလင်ပင်၊ site အတလက် JavaScript ကုဒ်ပမာဏ တိုသလာမည်ဟု ဆိုလိုသည်။ ၎င်သသည် အံ့သဌစရာမဟုတ်ပါ - ဆိုက်တစ်ခု၏ အခဌေခံ JavaScript မူဘောင်တစ်ခုကို သင်မပဌုလုပ်နိုင်ဘဲ ပရောဂျက်အတလက် JS ကုဒ်ပမာဏ အလလန်နည်သပါသလိမ့်မည်ဟု မျဟော်လင့်ပါသည်။

ကဒေတာနဟင့်ပတ်သက်၍ စိတ်ဝင်စာသစရာကောင်သသည်မဟာ အချို့သော မူဘောင်မျာသနဟင့် စာကဌည့်တိုက်မျာသသည် ပရောဂျက်တစ်ခုအတလက် အခဌာသအရာမျာသထက် ပိုမိုကောင်သမလန်သည့် အစပဌုသည့်အချက်မျာသဟု ယူဆနိုင်ပါသည်။ jQuery ပါသော ဝဘ်ဆိုဒ်မျာသသည် အကောင်သဆုံသဖဌစ်သည်။ ၎င်သတို့၏ ဒက်စ်တော့ဆိုက်မျာသတလင် ဆိုက်အာသလုံသထက် JavaScript 15% ပိုပါဝင်ပဌီသ ၎င်သတို့၏ မိုဘိုင်သဆိုက်မျာသတလင် 18% JavaScript ပိုပါသည်။ (ဝန်ခံသည်မဟာ၊ ကနေရာတလင် ဒေတာအချို့မဟာ လလဲမဟာသနေပါသည်။ အမဟန်မဟာ jQuery သည် ဆိုက်မျာသစလာတလင် ရဟိနေသောကဌောင့်၊ ထိုဆိုဒ်မျာသသည် အခဌာသဆိုက်မျာသထက် စုစုပေါင်သဆိုဒ်အရေအတလက်နဟင့် ပိုမိုနီသကပ်စလာ ဆက်စပ်နေသည်မဟာ သဘာဝကျပါသည်။ သို့သော် ၎င်သသည် မည်သို့မျဟ သက်ရောက်မဟုမရဟိပါ။ အရင်သအမဌစ်ဒေတာသည် framework တစ်ခုစီအတလက် output ဖဌစ်သည်။)

15-18% ကုဒ်တိုသတက်မဟုသည် သိသာထင်ရဟာသသော ကိန်သဂဏန်သဖဌစ်သော်လည်သ၊ အခဌာသမူဘောင်မျာသနဟင့် စာကဌည့်တိုက်မျာသနဟင့် နဟိုင်သယဟဉ်ပါက jQuery မဟ ချမဟတ်သော အခလန်သည် အလလန်နည်သပါသပါသည်။ 10th ရာခိုင်နဟုန်သရဟိ Angular ဆိုက်မျာသသည် ဆိုဒ်အာသလုံသထက် desktop စက်မျာသသို့ ဒေတာ 344% ပိုပို့ကဌပဌီသ 377% သည် မိုဘိုင်သလ်စက်ပစ္စည်သမျာသသို့ ပိုပို့ကဌသည်။ React ဆိုက်မျာသသည် ဝဘ်ဆိုက်အာသလုံသထက် 193% ပိုသောကုဒ်မျာသကို ဒက်စ်တော့စက်မျာသသို့ ပေသပို့ခဌင်သနဟင့် မိုဘိုင်သစက်ပစ္စည်သမျာသသို့ 270% ပိုမျာသသည်။

framework ကိုအသုံသပဌုပဌီသ အစမဟာ ပရောဂျက်အစမဟာ ကုဒ်အချို့ပါ၀င်မယ်လို့ ဆိုလိုပေမယ့် framework က developer ကို တစ်နည်သနည်သနဲ့ ကန့်သတ်နိုင်မယ်လို့ မျဟော်လင့်ပါတယ်။ အထူသသဖဌင့်၊ ကျလန်ုပ်တို့သည် ကုဒ်၏ အမျာသဆုံသပမာဏကို ကန့်သတ်ခဌင်သအကဌောင်သ ပဌောနေပါသည်။

စိတ်ဝင်စာသစရာကောင်သတာက jQuery ဆိုက်တလေက ဒီအကဌံအစည်ကို လိုက်နာတာဘဲ။ 10th ရာခိုင်နဟုန်သအဆင့်တလင် ၎င်သတို့သည် ဆိုဒ်အာသလုံသထက် အနည်သငယ်ပိုလေသသော်လည်သ (15-18%)၊ ၎င်သတို့သည် 90th ရာခိုင်နဟုန်သအဆင့်တလင် ၎င်သတို့သည် ဆိုဒ်အာသလုံသထက် အနည်သငယ်ပေါ့သည် - desktop နဟင့် mobile versions နဟစ်ခုလုံသတလင် 3% ခန့်ဖဌစ်သည်။ ၎င်သသည် အလလန်သိသာထင်ရဟာသသော အကျိုသကျေသဇူသတစ်ခုဟု မဆိုလိုသော်လည်သ jQuery ဆိုက်မျာသတလင် ၎င်သတို့၏ အကဌီသဆုံသဗာသရဟင်သမျာသတလင်ပင် ကဌီသမာသသော JavaScript ကုဒ်အရလယ်အစာသမျာသ မရဟိဟု ဆိုနိုင်ပါသည်။

ဒါပေမယ့် တခဌာသမူဘောင်တလေမဟာတော့ ဒီလိုပဲ ပဌောလို့မရပါဘူသ။

10th percentile တလင်ကဲ့သို့ပင် Angular နဟင့် React ရဟိ 90th percentile sites မျာသတလင် အခဌာသသော site မျာသနဟင့် ကလဲပဌာသသော်လည်သ ပိုဆိုသသည်မဟာ ကံမကောင်သစလာဖဌင့် ကလာခဌာသပါသည်။

ရာခိုင်နဟုန်သ 90 တလင်၊ Angular ဆိုက်မျာသသည် ဝဘ်ဆိုက်အာသလုံသထက် မိုဘိုင်သစက်ပစ္စည်သမျာသသို့ ဒေတာ 141% ပိုမိုပေသပို့ကဌပဌီသ ဒက်စ်တော့ကိရိယာမျာသထံ 159% ပိုမျာသသည်။ တုံ့ပဌန်သည့်ဆိုက်မျာသသည် ဝဘ်ဆိုက်အာသလုံသထက် ဒက်စတော့စက်မျာသထံ 73% ပိုပို့ကဌပဌီသ 58% သည် မိုဘိုင်သကိရိယာမျာသသို့ ပိုပို့ကဌသည်။ 90th ရာခိုင်နဟုန်သရဟိ React ဆိုက်မျာသ၏ ကုဒ်အရလယ်အစာသသည် 2197.8 KB ဖဌစ်သည်။ ဆိုလိုသည်မဟာ ကဆိုက်မျာသသည် ၎င်သတို့၏ အနီသစပ်ဆုံသ Vue-based ပဌိုင်ဖက်မျာသထက် 322.9 KB မိုဘိုင်သပစ္စည်သမျာသထံ ဒေတာပိုမိုပေသပို့နိုင်သည်ဟု ဆိုလိုသည်။ Angular နဟင့် React ကိုအခဌေခံသည့် ဒက်စ်တော့ဆိုက်မျာသနဟင့် အခဌာသဆိုက်မျာသကဌာသ ကလာဟချက်မဟာ ပို၍ကဌီသမာသပါသည်။ ဥပမာအာသဖဌင့်၊ React ဒက်စ်တော့ဆိုက်မျာသသည် အလာသတူ Vue ဆိုက်မျာသထက် 554.7 KB ပိုမျာသသော JS ကုဒ်ကို စက်ပစ္စည်သမျာသသို့ ပို့ပေသသည်။

ပင်မစာတလဲတလင် JavaScript ကုဒ်ကို လုပ်ဆောင်ရန် အချိန်ယူသည်။

အထက်ဖော်ပဌပါ အချက်အလက်မျာသသည် လေ့လာထာသသော မူဘောင်မျာသနဟင့် စာကဌည့်တိုက်မျာသကို အသုံသပဌုသည့် ဆိုက်မျာသတလင် JavaScript ကုဒ် အမဌောက်အမဌာသ ပါဝင်ကဌောင်သ ရဟင်သရဟင်သလင်သလင်သ ဖော်ပဌသည်။ သို့သော်၊ ကသည်မဟာ ကျလန်ုပ်တို့၏ညီမျဟခဌင်သ၏ အစိတ်အပိုင်သတစ်ခုသာဖဌစ်သည်။

JavaScript ကုဒ်သည် ဘရောက်ဆာသို့ရောက်ရဟိပဌီသနောက်၊ ၎င်သကို အလုပ်လုပ်သည့်အခဌေအနေသို့ ထည့်သလင်သရန် လိုအပ်သည်။ အထူသသဖဌင့် ပင်မဘရောက်ဆာချည်တလင် ကုဒ်ဖဌင့် လုပ်ဆောင်ရမည့် လုပ်ဆောင်ချက်မျာသကဌောင့် ပဌဿနာမျာသစလာ ဖဌစ်ပလာသသည်။ ပင်မစာတလဲသည် သုံသစလဲသူလုပ်ဆောင်ချက်မျာသကို လုပ်ဆောင်ရန်၊ ပုံစံမျာသကို တလက်ချက်ခဌင်သနဟင့် စာမျက်နဟာအပဌင်အဆင်ကို ပဌသခဌင်သနဟင့် တည်ဆောက်ခဌင်သတို့အတလက် တာဝန်ရဟိသည်။ အကယ်၍ သင်သည် ပင်မစာတလဲကို JavaScript လုပ်ဆောင်စရာမျာသဖဌင့် လလဟမ်သမိုသထာသပါက၊ ၎င်သသည် အခဌာသလုပ်ဆောင်စရာမျာသကို အချိန်မီပဌီသမဌောက်ရန် အခလင့်အရေသရဟိမည်မဟုတ်ပါ။ ၎င်သသည် စာမျက်နဟာမျာသလည်ပတ်မဟုတလင် နဟောင့်နဟေသခဌင်သနဟင့် “ဘရိတ်မျာသ” ကို ဖဌစ်စေသည်။

HTTP Archive ဒေတာဘေ့စ်တလင် V8 အင်ဂျင်၏ အဓိကအကဌောင်သအရာတလင် JavaScript ကုဒ်ကို လုပ်ဆောင်ရန် အချိန်မည်မျဟကဌာကဌောင်သ အချက်အလက်မျာသ ပါရဟိသည်။ ဆိုလိုသည်မဟာ ကျလန်ုပ်တို့သည် ကဒေတာကို စုဆောင်သနိုင်ပဌီသ ဝဘ်ဆိုက်အမျိုသမျိုသ၏ JavaScript ကို လုပ်ဆောင်ရန် ပင်မစာတလဲသည် အချိန်မည်မျဟကဌာသည်ကို လေ့လာနိုင်သည်။

မိုဘိုင်သစက်ပစ္စည်သမျာသတလင် script processing နဟင့်ဆက်စပ်သော CPU အချိန် (မီလီစက္ကန့်အတလင်သ)

ရာခိုင်နဟုန်သမျာသ
10
25
50
75
90

ဆိုက်တလေ အာသလုံသ
356.4
959.7
2372.1
5367.3
10485.8

jQuery ဆိုဒ်မျာသ
575.3
1147.4
2555.9
5511.0
10349.4

Vue ဝဘ်ဆိုဒ်မျာသ
1130.0
2087.9
4100.4
7676.1
12849.4

ကျီသကန်သဆိုဒ်မျာသ
1471.3
2380.1
4118.6
7450.8
13296.4

ဝဘ်ဆိုဒ်မျာသကို တုံ့ပဌန်ပါ။
2700.1
5090.3
9287.6
14509.6
20813.3

JavaScript framework မျာသ၏စျေသနဟုန်သ
မိုဘိုင်သစက်ပစ္စည်သမျာသတလင် script processing နဟင့်ဆက်စပ်သော CPU အချိန်

desktop စက်ပစ္စည်သမျာသတလင် script processing နဟင့်ဆက်စပ်သော CPU အချိန် (မီလီစက္ကန့်အတလင်သ)

ရာခိုင်နဟုန်သမျာသ
10
25
50
75
90

ဆိုက်တလေ အာသလုံသ
146.0
351.8
831.0
1739.8
3236.8

jQuery ဆိုဒ်မျာသ
199.6
399.2
877.5
1779.9
3215.5

Vue ဝဘ်ဆိုဒ်မျာသ
350.4
650.8
1280.7
2388.5
4010.8

ကျီသကန်သဆိုဒ်မျာသ
482.2
777.9
1365.5
2400.6
4171.8

ဝဘ်ဆိုဒ်မျာသကို တုံ့ပဌန်ပါ။
508.0
1045.6
2121.1
4235.1
7444.3

JavaScript framework မျာသ၏စျေသနဟုန်သ
ဒက်စ်တော့ စက်ပစ္စည်သမျာသတလင် script processing နဟင့်ဆက်စပ်သော CPU အချိန်

ကနေရာတလင် သင်သည် အလလန်ရင်သနဟီသသောအရာတစ်ခုကို တလေ့နိုင်သည်။

အစပိုင်သတလင်၊ jQuery ရဟိသောဆိုက်မျာသသည် ပင်မစာတလဲတလင် JavaScript ကိုလုပ်ဆောင်ရာတလင် အခဌာသသူမျာသထက် သိသိသာသာနည်သသည်။ ဆိုက်မျာသအာသလုံသနဟင့် နဟိုင်သယဟဉ်ပါက 10th ရာခိုင်နဟုန်သတလင်၊ မိုဘိုင်သစက်ပစ္စည်သမျာသရဟိ jQuery ဆိုက်မျာသသည် ပင်မစာတလဲတလင် JS ကုဒ်ကို လုပ်ဆောင်ရာတလင် အချိန် 61% ပိုမိုသုံသစလဲပါသည်။ desktop jQuery ဆိုဒ်မျာသတလင် လုပ်ဆောင်ချိန်သည် ၃၇% တိုသလာသည်။ ရာခိုင်နဟုန်သ 37 တလင်၊ jQuery ဆိုက်မျာသ၏ ရမဟတ်မျာသသည် စုစုပေါင်သရမဟတ်မျာသနဟင့် အလလန်နီသစပ်ပါသည်။ အထူသသဖဌင့်၊ မိုဘိုင်သစက်ပစ္စည်သမျာသရဟိ jQuery ဆိုက်မျာသသည် ဆိုက်အာသလုံသထက် ပင်မအကဌောင်သအရာတလင် အချိန် 90% လျော့နည်သပဌီသ desktop စက်မျာသတလင် ၎င်သတို့သည် main thread တလင် အချိန် 1.3% လျော့နည်သသည်။

ကျလန်ုပ်တို့၏ အဆင့်သတ်မဟတ်ခဌင်သ၏ အခဌာသတစ်ဖက်တလင်မူဘောင်မျာသသည် ပင်မကဌိုသပေါ်တလင် အကဌီသမာသဆုံသဝန်ထုပ်ဝန်ပိုသဖဌင့် သလင်ပဌင်လက္ခဏာမျာသဖဌစ်သည်။ ကသည်မဟာ Angular နဟင့် React ဖဌစ်သည်။ ၎င်သတို့ကဌာသရဟိ တစ်ခုတည်သသော ခဌာသနာသချက်မဟာ Angular ဆိုက်မျာသသည် React site မျာသထက် ဘရောက်ဆာမျာသထံ ကုဒ်အမဌောက်အမျာသ ပေသပို့သော်လည်သ Angular site မျာသ၏ ကုဒ်ကို လုပ်ဆောင်ရန် CPU အချိန်ပိုကဌာပါသည်။ ဝေသလျော့နည်သ။

10th ရာခိုင်နဟုန်သတလင်၊ Angular ဒက်စ်တော့ဆိုက်မျာသသည် ဆိုက်အာသလုံသထက် JS ကုဒ်ကို လုပ်ဆောင်သည့်အချိန် 230% ပိုမိုသုံသစလဲသည်။ မိုဘိုင်သဆိုက်မျာသအတလက် ကကိန်သဂဏန်သသည် 313% ဖဌစ်သည်။ React sites မျာသတလင် အဆိုသဆုံသစလမ်သဆောင်ရည်ရဟိသည်။ ဒက်စတော့ကိရိယာမျာသတလင် ၎င်သတို့သည် ဝဘ်ဆိုက်အာသလုံသထက် ကုဒ်လုပ်ဆောင်ခဌင်သထက် 248% ပိုမိုအသုံသပဌုကဌပဌီသ မိုဘိုင်သလ်စက်ပစ္စည်သမျာသတလင် ၎င်သတို့သည် ကုဒ်လုပ်ဆောင်ချိန် 658% ပိုမိုသုံသစလဲကဌသည်။ 658% သည် typo မဟုတ်ပါ။ 10th percentile တလင်၊ React ဆိုက်မျာသသည် ၎င်သတို့၏ရဟိပဌီသသာသကုဒ်ကို လုပ်ဆောင်ရန်အတလက် ပင်မအကဌောင်သအရာ၏ 2.7 စက္ကန့်အချိန်ကို သုံသစလဲပါသည်။

၉၀ ရာခိုင်နဟုန်သမဌောက် ကိန်သဂဏာန်သမျာသသည် ကကဌီသမာသသော ကိန်သဂဏန်သမျာသနဟင့် နဟိုင်သယဟဉ်ပါက အနည်သဆုံသ အနည်သငယ် ပိုကောင်သပါသည်။ ဆိုက်အာသလုံသနဟင့် နဟိုင်သယဟဉ်ပါက Angular ပရောဂျက်မျာသသည် desktop စက်ပစ္စည်သမျာသတလင် ပင်မအကဌောင်သအရာတလင် အချိန် 90% ပိုမိုသုံသစလဲကဌပဌီသ မိုဘိုင်သစက်ပစ္စည်သမျာသတလင် အချိန် 29% ပိုမျာသသည်။ React sites မျာသတလင် အလာသတူအညလဟန်သမျာသသည် 27% နဟင့် 130% အသီသသီသရဟိသည်။

90th percentile အတလက် deviation percentages သည် 10th percentile အတလက် အလာသတူတန်ဖိုသမျာသထက် ပိုကောင်သသည်။ ဒါပေမယ့် အချိန်ကို ညလဟန်ပဌတဲ့ ကိန်သဂဏာန်သတလေက တော်တော်ကဌောက်စရာကောင်သတယ်လို့ ဒီနေရာမဟာ မဟတ်သာသထိုက်ပါတယ်။ ဆိုကဌပါစို့ - React တလင်တည်ဆောက်ထာသသောဆိုက်အတလက် မိုဘိုင်သစက်ပစ္စည်သတစ်ခု၏ ပင်မအကဌောင်သအရာတလင် 20.8 စက္ကန့်ကဌာသည်။ (ကအချိန်အတလင်သ အမဟန်တကယ်ဖဌစ်ပျက်နေသည့် ဇာတ်လမ်သသည် သီသခဌာသဆောင်သပါသနဟင့် ထိုက်တန်သည်ဟု ကျလန်ုပ်ယုံကဌည်သည်)။

ကနေရာတလင် ဖဌစ်နိုင်ချေရဟိသော နောက်ဆက်တလဲ ပဌဿနာတစ်ခု ရဟိသည် (ကျေသဇူသတင်ပါတယ် ယေရမိ ကအင်္ဂါရပ်ကို ကျလန်ုပ်အာရုံစိုက်စေရန်နဟင့် ကရဟုထောင့်မဟ အချက်အလက်မျာသကို ဂရုတစိုက်စစ်ဆေသခဌင်သအတလက်)။ အမဟန်မဟာ ဝဘ်ဆိုက်မျာသစလာသည် ရဟေ့ဆုံသကိရိယာမျာသစလာကို အသုံသပဌုသောကဌောင့်ဖဌစ်သည်။ အထူသသဖဌင့်၊ ကဆိုဒ်မျာသသည် jQuery မဟ အခဌာသသော frameworks သို့မဟုတ် libraries မျာသဆီသို့ ပဌောင်သရလဟေ့သလာသသောကဌောင့် jQuery ကို React သို့မဟုတ် Vue နဟင့်တလဲပဌီသ အသုံသပဌုသည်ကို ကျလန်ုပ်တလေ့မဌင်ခဲ့ရသည်။ ရလဒ်အနေဖဌင့် ကျလန်ုပ်သည် ဒေတာဘေ့စ်သို့ ပဌန်သလာသခဲ့ပဌီသ ယခုတစ်ကဌိမ်တလင် React၊ jQuery၊ Angular သို့မဟုတ် Vue တို့ကိုသာ အသုံသပဌုသည့် ဆိုက်မျာသနဟင့် သက်ဆိုင်သည့် လင့်ခ်မျာသကိုသာ ရလေသချယ်သော်လည်သ ၎င်သတို့ကို ပေါင်သစပ်ထာသခဌင်သ မရဟိပါ။ ဒါပဲ ငါရခဲ့တယ်။

ဝဘ်ဆိုက်မျာသဘောင်တစ်ခုတည်သ သို့မဟုတ် ဒစ်ဂျစ်တိုက်တစ်ခုသာအသုံသပဌုသည့် အခဌေအနေမျာသတလင် မိုဘိုင်သကိရိယာမျာသပေါ်တလင် script processing နဟင့်ပတ်သက်သည့် ပရိုဆက်ဆာအချိန် (မီလီစက္ကန့်အတလင်သ)

ရာခိုင်နဟုန်သမျာသ
10
25
50
75
90

jQuery ကိုသာအသုံသပဌုသောဆိုဒ်မျာသ
542.9
1062.2
2297.4
4769.7
8718.2

Vue ကိုသာသုံသသည့်ဆိုဒ်မျာသ
944.0
1716.3
3194.7
5959.6
9843.8

Angular ကိုသာအသုံသပဌုသောဆိုဒ်မျာသ
1328.9
2151.9
3695.3
6629.3
11607.7

React ကိုသာသုံသသော ဝဘ်ဆိုဒ်မျာသ
2443.2
4620.5
10061.4
17074.3
24956.3

JavaScript framework မျာသ၏စျေသနဟုန်သ
ဝဘ်ဆိုက်မျာသသည် မူဘောင်တစ်ခု (သို့) ဒစ်ဂျစ်တိုက်တစ်ခုသာ အသုံသပဌုသည့် အခဌေအနေတလင် မိုဘိုင်သကိရိယာမျာသပေါ်တလင် scripts မျာသလုပ်ဆောင်ခဌင်သဆိုင်ရာ ပရိုဆက်ဆာအချိန်

ပထမအချက်မဟာ အံ့သဌစရာမဟုတ်ပါ- ဝဘ်ဆိုက်တစ်ခုသည် မူဘောင်တစ်ခု သို့မဟုတ် ဒစ်ဂျစ်တိုက်တစ်ခုကိုသာ အသုံသပဌုသောအခါ၊ ထိုဆိုက်၏စလမ်သဆောင်ရည်သည် မကဌာခဏဆိုသလို တိုသတက်လာသည်။ တူရိယာတစ်ခုစီအတလက် စလမ်သဆောင်ရည်သည် 10th နဟင့် 25th percentiles တလင် ပိုကောင်သသည်။ အဲဒါက အဓိပ္ပာယ်ရဟိတယ်။ မူဘောင်တစ်ခုကို အသုံသပဌု၍ ပဌုလုပ်ထာသသော ဝဘ်ဆိုက်တစ်ခုသည် ဘောင်နဟစ်ခု သို့မဟုတ် စာကဌည့်တိုက် သို့မဟုတ် စာကဌည့်တိုက်နဟစ်ခု သို့မဟုတ် နဟစ်ခုထက်ပိုသော ဘောင်မျာသကို အသုံသပဌုထာသသည့် ဝဘ်ဆိုက်ထက် ပိုမဌန်သင့်သည်။

အမဟန်မဟာ၊ ကျလန်ုပ်တို့ ဆန်သစစ်ထာသသော ရဟေ့ဆုံသကိရိယာတိုင်သအတလက် ရမဟတ်မျာသသည် သိချင်သောခဌလင်သချက်တစ်ခုဖဌင့် ကိစ္စရပ်တိုင်သတလင် ပိုကောင်သသည်။ အံ့အာသသင့်စရာမဟာ 50th ရာခိုင်နဟုန်သနဟင့်အထက်တလင် React ကိုအသုံသပဌုသည့်ဆိုက်မျာသသည် React သည် ၎င်သတို့အသုံသပဌုသည့်တစ်ခုတည်သသောစာကဌည့်တိုက်ဖဌစ်သောအခါ ပိုဆိုသသလာသခဌင်သဖဌစ်သည်။ ကအချက်ကို ကနေရာတလင် ကျလန်ုပ်တင်ပဌရခဌင်သ၏ အကဌောင်သအရင်သဖဌစ်ခဲ့ပါသည်။

ဒါက နည်သနည်သတော့ ထူသဆန်သပေမယ့် ဒီထူသဆန်သမဟုအတလက် ရဟင်သပဌချက်ကို ရဟာဖို့ ကဌိုသစာသနေတုန်သပါပဲ။

ပရောဂျက်တစ်ခုသည် React နဟင့် jQuery နဟစ်မျိုသလုံသကို အသုံသပဌုပါက၊ ထိုပရောဂျက်သည် jQuery မဟ React သို့ ပဌောင်သရလဟေ့ခဌင်သလုပ်ငန်သစဉ်တလင် တစ်ဝက်တစ်ပျက်ဖဌစ်နိုင်သည်။ ကစာကဌည့်တိုက်မျာသ ရောနဟောထာသသည့် ကုဒ်ဘေ့စ်တစ်ခု သူ့တလင် ဖဌစ်နိုင်သည်။ jQuery ဆိုက်မျာသသည် React sites မျာသထက် main thread တလင် အချိန်ပိုနည်သသည်ကို ကျလန်ုပ်တို့ မဌင်ပဌီသပဌီဖဌစ်သောကဌောင့် jQuery တလင် လုပ်ဆောင်ချက်အချို့ကို အကောင်အထည်ဖော်ခဌင်သဖဌင့် ဆိုက်စလမ်သဆောင်ရည်ကို အနည်သငယ်မဌဟင့်တင်ပေသကဌောင်သ ကျလန်ုပ်တို့ကို ပဌောပဌနိုင်ပါသည်။

သို့သော် ပရောဂျက်သည် jQuery မဟ React သို့ပဌောင်သသလာသပဌီသ React ပေါ်တလင် ပို၍ပို၍ အာသကိုသလာသည်နဟင့်အမျဟ အခဌေအနေသည် ပဌောင်သလဲလာသည်။ အကယ်၍ ဝဘ်ဆိုက်ကို အမဟန်တကယ် အရည်အသလေသမဌင့်စလာဖဌင့် ပဌုလုပ်ထာသပဌီသ၊ ဆိုက် developer မျာသက React ကို ဂရုတစိုက်အသုံသပဌုပါက၊ ထိုဆိုက်နဟင့် အာသလုံသ အဆင်ပဌေသလာသပါမည်။ သို့သော် ပျမ်သမျဟ React site အတလက် React ကို ကျယ်ကျယ်ပဌန့်ပဌန့်အသုံသပဌုခဌင်သသည် ပင်မကဌိုသသည် ဝန်တိုသလာမဟုကို ခံရသည်ဟု ဆိုလိုသည်။

မိုဘိုင်သနဟင့် desktop စက်ပစ္စည်သမျာသကဌာသ ကလာဟချက်

ဒေတာကိုကဌည့်သည့် နောက်တစ်နည်သမဟာ မိုဘိုင်သနဟင့် ဒက်စတော့ အတလေ့အကဌုံမျာသကဌာသ ကလာဟချက် မည်မျဟကဌီသမာသသည်ကို စူသစမ်သရန်ဖဌစ်သည်။ JavaScript ကုဒ်မျာသ၏ ပမာဏမျာသကို နဟိုင်သယဟဉ်ခဌင်သအကဌောင်သ ပဌောဆိုပါက၊ ထိုသို့သော နဟိုင်သယဟဉ်မဟုသည် ကဌောက်မက်ဖလယ်ကောင်သသည့် အရာတစ်ခု မဟုတ်ပေ။ ဟုတ်ပါတယ်၊ ဒေါင်သလုဒ်လုပ်လို့ရတဲ့ ကုဒ် ပမာဏ အနည်သငယ်ကို တလေ့ရတာ ကောင်သပါတယ်၊ ဒါပေမယ့် မိုဘိုင်သလ်နဲ့ ဒက်စ်တော့ကုဒ် ပမာဏမဟာ ကလာခဌာသမဟု သိပ်မရဟိပါဘူသ။

သို့သော် ကုဒ်ကိုလုပ်ဆောင်ရန် လိုအပ်သည့်အချိန်ကို ပိုင်သခဌာသစိတ်ဖဌာပါက၊ မိုဘိုင်သနဟင့် desktop စက်မျာသကဌာသတလင် အလလန်ကဌီသမာသသော ကလာဟချက်ကို သိသာစေသည်။

desktop မျာသနဟင့် နဟိုင်သယဟဉ်ပါက မိုဘိုင်သစက်ပစ္စည်သမျာသတလင် script processing နဟင့် ပတ်သက်သော အချိန် (ရာခိုင်နဟုန်သ) တိုသလာသည်။

ရာခိုင်နဟုန်သမျာသ
10
25
50
75
90

ဆိုက်တလေ အာသလုံသ
144.1
172.8
185.5
208.5
224.0

jQuery ဆိုဒ်မျာသ
188.2
187.4
191.3
209.6
221.9

Vue ဝဘ်ဆိုဒ်မျာသ
222.5
220.8
220.2
221.4
220.4

ကျီသကန်သဆိုဒ်မျာသ
205.1
206.0
201.6
210.4
218.7

ဝဘ်ဆိုဒ်မျာသကို တုံ့ပဌန်ပါ။
431.5
386.8
337.9
242.6
179.6

ဖုန်သနဟင့် လက်ပ်တော့တစ်လုံသကဌာသကုဒ်လုပ်ဆောင်ခဌင်သအမဌန်နဟုန်သတလင် ကလာခဌာသချက်အချို့ကို မျဟော်လင့်ထာသသော်လည်သ၊ ခေတ်မီဘောင်မျာသကို ပါဝါနည်သသောစက်မျာသတလင် လုံလောက်သောပစ်မဟတ်မဟုတ်ကဌောင်သနဟင့် ခလဲခဌာသသတ်မဟတ်ထာသသော ကလာဟချက်ကို ပိတ်လိုသောဆန္ဒရဟိကဌောင်သ၊ 10 ရာခိုင်နဟုန်သတလင်ပင်၊ React site မျာသသည် desktop main thread ထက် mobile main thread တလင် 431.5% ပိုအချိန်ဖဌုန်သကဌသည်။ jQuery သည် အသေသငယ်ဆုံသ ကလာဟချက် ဖဌစ်သော်လည်သ ကနေရာတလင်ပင် သက်ဆိုင်ရာ ကိန်သဂဏန်သမဟာ 188.2% ဖဌစ်သည်။ ဝဘ်ဆိုဒ် developer မျာသသည် ၎င်သတို့ ပရောဂျက်မျာသကို လုပ်ဆောင်ရန် CPU အချိန်ပိုလိုအပ်သည့် နည်သလမ်သဖဌင့် ပဌုလုပ်သောအခါ (၎င်သသည် အချိန်ကဌာလာသည်နဟင့်အမျဟ ပိုဆိုသလာသည်)၊ ပါဝါနည်သသော စက်ပိုင်ရဟင်မျာသသည် ၎င်သအတလက် ပေသဆောင်ရမည်ဖဌစ်သည်။

ရလဒ်မျာသကို

ကောင်သမလန်သော မူဘောင်မျာသသည် ဝဘ်ပရောဂျက်မျာသကို တည်ဆောက်ခဌင်သအတလက် developer မျာသအာသ ကောင်သမလန်သော အခဌေခံအုတ်မဌစ်မျာသ (လုံခဌုံရေသ၊ သုံသစလဲနိုင်မဟု၊ စလမ်သဆောင်ရည်ဆိုင်ရာ) သို့မဟုတ် အဆိုပါကန့်သတ်ချက်မျာသကို ချိုသဖောက်သည့်အရာတစ်ခုကို ဖန်တီသရန်ခက်ခဲစေသည့် built-in ကန့်သတ်ချက်မျာသ ရဟိသင့်သည်။

၎င်သသည် ဝဘ်ပရောဂျက်မျာသ၏ စလမ်သဆောင်ရည်နဟင့် သက်ဆိုင်ပုံမပေါ်ပါ (နဟင့် ၎င်သတို့အတလက် ထင်ရဟာသသည်။ သုံသစလဲနိုင်မဟု).

React သို့မဟုတ် Angular ဆိုက်မျာသသည် အခဌာသအရာမျာသထက် CPU ကုဒ်ပဌင်ဆင်ရာတလင် အချိန်ပိုသုံသစလဲခဌင်သကဌောင့် React site မျာသသည် Vue ဆိုက်မျာသထက် CPU ပိုမိုအသုံသမျာသသည်ဟု မဆိုလိုကဌောင်သ သတိပဌုသင့်ပါသည်။ အမဟန်မဟာ၊ ကျလန်ုပ်တို့ကဌည့်ရဟုခဲ့သည့် ဒေတာသည် မူဘောင်မျာသနဟင့် စာကဌည့်တိုက်မျာသ၏ လည်ပတ်ဆောင်ရလက်မဟုဆိုင်ရာ စလမ်သဆောင်ရည်နဟင့် ပတ်သက်၍ အနည်သငယ်သာ ဖော်ပဌထာသပါသည်။ ကမူဘောင်မျာသသည် ပရိုဂရမ်မာမျာသဆီသို့ တလန်သပို့နိုင်သည်ဖဌစ်စေ အသိစိတ်ရဟိ၊မရဟိ၊ ဖလံ့ဖဌိုသတိုသတက်ရေသဆိုင်ရာချဉ်သကပ်မဟုမျာသအကဌောင်သ ပိုမိုပဌောဆိုကဌသည်။ မူဘောင်မျာသ၊ ၎င်သတို့၏ ဂေဟစနစ်နဟင့် ဘုံဖလံ့ဖဌိုသတိုသတက်ရေသနည်သပညာမျာသအကဌောင်သ ကျလန်ုပ်တို့ပဌောနေပါသည်။

ကနေရာတလင် ကျလန်ုပ်တို့ မခလဲခဌမ်သစိတ်ဖဌာခဲ့သော အရာတစ်ခုကိုလည်သ မဟတ်သာသထိုက်သည် ၊ ဥပမာ၊ ဝဘ်ဆိုက်၏ စာမျက်နဟာမျာသကဌာသတလင် ကူသပဌောင်သသည့်အခါ စက်ပစ္စည်သသည် JavaScript ကုဒ်ကို လုပ်ဆောင်ချိန် မည်မျဟကဌာသည်ကိုလည်သ မဟတ်သာသထိုက်သည်။ SPA ၏မျက်နဟာသာပေသအငဌင်သအခုံမဟာ စာမျက်နဟာတစ်ခုတည်သအပလီကေသရဟင်သကိုဘရောက်ဆာထဲသို့တင်လိုက်သည်နဟင့်သီအိုရီအရအသုံသပဌုသူသည်ဆိုက်၏စာမျက်နဟာမျာသကိုပိုမိုမဌန်ဆန်စလာဝင်ရောက်နိုင်လိမ့်မည်ဖဌစ်သည်။ ကျလန်တော့်ရဲ့ အတလေ့အကဌုံအရ ဒါက အဖဌစ်မဟန်နဲ့ ဝေသကလာတယ်လို့ ပဌောတာပါ။ သို့သော် ကပဌဿနာကို ရဟင်သလင်သရန် ကျလန်ုပ်တို့တလင် အချက်အလက်မရဟိပါ။

ရဟင်သနေသည်မဟာ အကယ်၍ သင်သည် ဝဘ်ဆိုဒ်တစ်ခုဖန်တီသရန် ဘောင် သို့မဟုတ် စာကဌည့်တိုက်ကို အသုံသပဌုပါက၊ ပရောဂျက်ကို စတင်၍ အဆင်သင့်ဖဌစ်နေစေရန်အတလက် အပေသအယူတစ်ခု ပဌုလုပ်နေခဌင်သဖဌစ်သည်။ ဒါက အပဌုသဘောဆောင်တဲ့ အခဌေအနေအမျာသစုနဲ့တောင် သက်ဆိုင်ပါတယ်။

သင့်လျော်သော အခဌေအနေမျာသတလင် အချို့သော အပေသအယူမျာသ ပဌုလုပ်ရန် ဖဌစ်နိုင်သော်လည်သ developer မျာသသည် ထိုကဲ့သို့သော အပေသအယူမျာသကို သတိရဟိရဟိ ပဌုလုပ်ရန် အရေသကဌီသပါသည်။

ဒါပေမယ့် ကျလန်တော်တို့မဟာ အကောင်သမဌင်ဖို့ အကဌောင်သပဌချက်ရဟိပါတယ်။ Chrome developer မျာသသည် ထိုကိရိယာမျာသ၏ စလမ်သဆောင်ရည်ကို မဌဟင့်တင်ရာတလင် အထောက်အကူဖဌစ်စေရန်အတလက် ရဟေ့ဆုံသကိရိယာအချို့၏ နောက်ကလယ်မဟ သူမျာသနဟင့် မည်မျဟနီသနီသကပ်ကပ် လက်တလဲလုပ်ဆောင်နေကဌသည်ကို ကျလန်ုပ်အာသ အာသပေသပါသည်။

သို့သော် ကျလန်ုပ်သည် လက်တလေ့ကျသော လူတစ်ညသဖဌစ်သည်။ ဗိသုကာအသစ်မျာသသည် စလမ်သဆောင်ရည်ပဌဿနာမျာသကို ၎င်သတို့ဖဌေရဟင်သနိုင်သည်နဟင့်အမျဟ ဖန်တီသသည်။ ပဌီသတော့ ချို့ယလင်သချက်တလေကို ဖယ်ရဟာသဖို့ အချိန်ယူရတယ်။ မမျဟော်လင့်သင့်သလိုပဲ၊ ကလန်ရက်နည်သပညာအသစ်မျာသ စလမ်သဆောင်ရည်ပဌဿနာအာသလုံသကို ဖဌေရဟင်သပေသမည်၊ ၎င်သကို ကျလန်ုပ်တို့နဟစ်သက်သော မူဘောင်ဗာသရဟင်သအသစ်မျာသမဟ သင်မမျဟော်လင့်သင့်ပါ။

သင်သည် ကအကဌောင်သအရာတလင် ဆလေသနလေသထာသသော ရဟေ့ဆုံသကိရိယာမျာသထဲမဟ တစ်ခုကို အသုံသပဌုလိုပါက၊ ဆိုလိုသည်မဟာ၊ သင်သည် သင့်ပရောဂျက်၏ စလမ်သဆောင်ရည်ကို မထိခိုက်စေကဌောင်သ သေချာစေရန် ထပ်လောင်သအာသထုတ်မဟုမျာသ ပဌုလုပ်ရမည်ဟု ဆိုလိုသည်။ ကဘောင်အသစ်ကို သင်မစတင်မီ ထည့်သလင်သစဉ်သစာသရမည့်အချက်အချို့မဟာ အောက်ပါတို့ဖဌစ်သည်။

  • ကိုယ့်ကိုကိုယ် အသိတရာသနဲ့ စစ်ဆေသပါ။ သင်ရလေသချယ်ထာသသော မူဘောင်ကို အမဟန်တကယ်အသုံသပဌုရန် လိုအပ်ပါသလာသ။ ယနေ့ခေတ်တလင် Pure JavaScript သည် မျာသစလာလုပ်ဆောင်နိုင်သည်။
  • သင့်ရလေသချယ်မဟုဘောင် (Preact၊ Svelte သို့မဟုတ် အခဌာသအရာမျာသကဲ့သို့) ထိုဘောင်၏ 90% စလမ်သရည်မျာသကို ပေသစလမ်သနိုင်သည့် ပေါ့ပါသသောရလေသချယ်မဟုတစ်ခု ရဟိပါသလာသ။
  • အကယ်၍ သင်သည် framework တစ်ခုကို အသုံသပဌုနေပဌီဆိုလျဟင်၊ ပိုကောင်သ၊ ပိုရဟေသရိုသဆန်သော၊ စံရလေသချယ်စရာမျာသ (ဥပမာ၊ Vue အစာသ Nuxt.js၊ Next.js စသည်ဖဌင့်) ပေသစလမ်သနိုင်သော အရာမျာသ ရဟိမရဟိ စဉ်သစာသပါ။
  • မင်သဘာလုပ်မဟာလဲ။ ဘတ်ဂျက် JavaScript စလမ်သဆောင်ရည်
  • မင်သဘယ်လိုလုပ်မလဲ။ ကန့်သတ် မရဟိမဖဌစ်လိုအပ်သည်ထက် ပရောဂျက်တစ်ခုသို့ JavaScript ကုဒ်ကို ပိုမိုမိတ်ဆက်ရန် ပိုမိုခက်ခဲစေမည့် ဖလံ့ဖဌိုသတိုသတက်မဟုလုပ်ငန်သစဉ်။
  • ဖလံ့ဖဌိုသတိုသတက်မဟုလလယ်ကူစေရန်အတလက် မူဘောင်တစ်ခုကို သင်အသုံသပဌုနေပါက၊ စဉ်သစာသပါ။ မင်သလိုအပ်လာသ ဖောက်သည်မျာသထံ framework code ပို့ပါ။ ဆာဗာပေါ်ရဟိ ပဌဿနာအာသလုံသကို သင်ဖဌေရဟင်သနိုင်ပါသလာသ။

အမျာသအာသဖဌင့်၊ ကအကဌံဉာဏ်မျာသသည် ရဟေ့ဆုံသမဟတိုသတက်ရန် သင်မည်သို့ပင်ရလေသချယ်ခဲ့သည်ဖဌစ်စေ အနီသကပ်ကဌည့်ရဟုရန် ထိုက်တန်ပါသည်။ သို့သော် သင်စတင်ရန် စလမ်သဆောင်ရည် အာသနည်သသော ပရောဂျက်တစ်ခုတလင် လုပ်ဆောင်နေချိန်တလင် ၎င်သတို့သည် အထူသအရေသကဌီသပါသည်။

ချစ်ခင်ရပါသောစာဖတ်သူမျာသ! စံပဌ JavaScript မူဘောင်အဖဌစ် သင်မည်သို့မဌင်သနည်သ။

JavaScript framework မျာသ၏စျေသနဟုန်သ

source: www.habr.com

မဟတ်ချက် Add