ජාවාස්ක්‍රිප්ට් කේත පොකුරක් එහි ක්‍රියාත්මක කිරීමට වඩා වෙබ් අඩවියක් මන්දගාමී කිරීමට වේගවත් ක්‍රමයක් නොමැත (කිසිදු වදන් අදහස් නොවේ). ජාවාස්ක්‍රිප්ට් භාවිතා කරන විට, අවම වශයෙන් හතර වතාවක් ව්‍යාපෘති කාර්ය සාධනය සඳහා ඔබ ගෙවිය යුතුය. වෙබ් අඩවියේ ජාවාස්ක්‍රිප්ට් කේතය පරිශීලකයින්ගේ පද්ධති පූරණය කරන දේ මෙන්න:
- ජාලය හරහා ගොනුවක් උඩුගත කිරීම.
- බාගත කිරීමෙන් පසු ඇසුරුම් නොකළ මූල කේතය විග්‍රහ කිරීම සහ සම්පාදනය කිරීම.
- JavaScript කේතය ක්‍රියාත්මක කිරීම.
- මතක පරිභෝජනය.
මෙම සංයෝජනය හැරෙනවා .
තවද අපි අපගේ ව්‍යාපෘතිවල වැඩි වැඩියෙන් JS කේතය ඇතුළත් කරන්නෙමු. React, Vue සහ වෙනත් වැනි රාමු සහ පුස්තකාල මගින් බල ගැන්වෙන අඩවි වෙත සංවිධාන ගමන් කරන විට, අපි වෙබ් අඩවි වල මූලික ක්‍රියාකාරීත්වය JavaScript මත රඳා පවතී.
JavaScript රාමු භාවිතා කරන ඉතා බර වෙබ් අඩවි බොහොමයක් මම දැක ඇත්තෙමි. නමුත් ප්‍රශ්නය පිළිබඳ මගේ දැක්ම දැඩි ලෙස පක්ෂග්‍රාහී ය. කාරණය නම් මා සමඟ වැඩ කරන සමාගම් මා වෙත පැමිණෙන්නේ ඔවුන්ට සංකීර්ණ වෙබ් අඩවි කාර්ය සාධන ගැටළු ඇති බැවිනි. එහි ප්රතිඵලයක් වශයෙන්, මෙම ගැටළුව කෙතරම් පුලුල්ව පැතිරී ඇත්ද යන්න දැන ගැනීමට මම කුතුහලයෙන් සිටියෙමි, අපි යම් වෙබ් අඩවියක් සඳහා පදනම ලෙස එක් හෝ තවත් රාමුවක් තෝරා ගන්නා විට අප ගෙවන "දඩ" මොනවාද.
මෙම ව්යාපෘතිය මට මෙය තේරුම් ගැනීමට උපකාර විය. .
දත්ත
HTTP Archive ව්යාපෘතිය සාමාන්‍ය ඩෙස්ක්ටොප් අඩවි වෙත සබැඳි 4308655 ක් සහ ජංගම අඩවි වෙත සබැඳි 5484239 ක් නිරීක්ෂණය කරයි. මෙම සබැඳි හා සම්බන්ධ බොහෝ දර්ශක අතර අනුරූප වෙබ් අඩවිවල ඇති තාක්ෂණයන් ලැයිස්තුවකි. මෙයින් අදහස් කරන්නේ අපට විවිධ රාමු සහ පුස්තකාල භාවිතා කරන අඩවි දහස් ගණනක් නියැදිය හැකි අතර ඔවුන් සේවාලාභීන්ට කොපමණ කේතයක් යවන්නේද සහ එම කේතය පරිශීලකයින්ගේ පද්ධති මත පැටවීම කොපමණ දැයි ඉගෙන ගත හැකිය.
මම 2020 මාර්තු සිට දත්ත රැස් කළෙමි, එය මට ප්රවේශය තිබූ නවතම දත්ත විය.
මම අනෙකුත් මූලාශ්‍ර ද්‍රව්‍ය භාවිතා කිරීමට සලකා බැලුවද, සියලු අඩවි සඳහා එකතු කරන ලද HTTP සංරක්ෂිත දත්ත ප්රතික්රියා, Vue සහ කෝණික භාවිත කරන බව සොයා ගත් අඩවි සඳහා දත්ත සමඟ සංසන්දනය කිරීමට තීරණය කළෙමි.
එය වඩාත් රසවත් කිරීමට, මම මූලාශ්‍ර දත්ත කට්ටලයට jQuery භාවිතා කරන අඩවි ද එක් කළෙමි. මෙම පුස්තකාලය තවමත් ඉතා ජනප්රියයි. එය React, Vue සහ Angular විසින් පිරිනමනු ලබන තනි පිටු යෙදුම් (SPA) ආකෘතියෙන් වෙනස් වන වෙබ් අඩවි සංවර්ධනය සඳහා ප්‍රවේශයක් ද හඳුන්වා දෙයි.
HTTP ලේඛනාගාරයේ ඇති සබැඳි අපට උනන්දුවක් දක්වන තාක්ෂණයන් භාවිතා කරන බව සොයාගෙන ඇති අඩවි නියෝජනය කරයි
රාමුව හෝ පුස්තකාලය
ජංගම අඩවි වලට සබැඳි
සාමාන්‍ය අඩවි වලට සබැඳි
jQuery
4615474
3714643
React
489827
241023
Vue
85649
43691
ෙකෝණික
19423
18088
බලාපොරොත්තු සහ සිහින
අපි දත්ත විශ්ලේෂණය කිරීමට පෙර, මම බලාපොරොත්තු වීමට කැමති දේ ගැන කතා කිරීමට අවශ්යයි.
පරමාදර්ශී ලෝකයක, රාමු සංවර්ධකයින්ගේ අවශ්‍යතා සපුරාලීමෙන් ඔබ්බට ගොස් අපගේ වෙබ් අඩවියේ එදිනෙදා පරිශීලකයින්ට යම් නිශ්චිත ප්‍රතිලාභ ලබා දෙනු ඇතැයි මම විශ්වාස කරමි. ඵලදායිතාව එම ප්‍රතිලාභවලින් එකක් පමණි. ප්‍රවේශ්‍යතාව සහ ආරක්ෂාව ද මෙහිදී සිහිපත් වේ. නමුත් මෙය වඩාත්ම වැදගත් දෙය පමණි.
එබැවින්, පරමාදර්ශී ලෝකයක, යම් ආකාරයක රාමුවක් ඉහළ කාර්යසාධනයක් සහිත වෙබ් අඩවියක් නිර්මාණය කිරීම පහසු කළ යුතුය. මෙය සිදු කළ යුත්තේ රාමුව මඟින් සංවර්ධකයාට ව්‍යාපෘතියක් තැනීමට හොඳ පදනමක් ලබා දීම නිසා හෝ එය සංවර්ධනයට සීමා පැනවීම නිසා යමක් සංවර්ධනය කිරීමට අපහසු වන අවශ්‍යතා ඉදිරිපත් කිරීම නිසා ය. එය මන්දගාමී බවට හැරේ.
හොඳම රාමු දෙකම කළ යුතුය: හොඳ පදනමක් සැපයීම, සහ ඔබට යහපත් ප්රතිඵලය ලබා ගැනීමට ඉඩ සලසන කාර්යයට සීමා පැනවීම.
දත්තවල මධ්‍ය අගයන් විශ්ලේෂණය කිරීමෙන් අපට අවශ්‍ය තොරතුරු ලබා නොදේ. තවද, ඇත්ත වශයෙන්ම, මෙම ප්රවේශය අපගේ අවධානයෙන් ඔබ්බට යයි . ඒ වෙනුවට, මම මා සතුව තිබූ දත්ත වලින් ප්‍රතිශත ලකුණු ලබා ගත්තෙමි. මේවා 10, 25, 50 (මධ්‍ය), 75, 90 ප්‍රතිශත වේ.
මම විශේෂයෙන් 10 වැනි සහ 90 වැනි ප්‍රතිශත ගැන උනන්දු වෙමි. 10 වැනි ප්‍රතිශතය නිශ්චිත රාමුවක් සඳහා හොඳම කාර්ය සාධනය (හෝ අඩුම තරමින් හොඳම දේට වඩා අඩු හෝ අඩු) නියෝජනය කරයි. වෙනත් වචන වලින් කිවහොත්, මෙයින් අදහස් කරන්නේ යම් රාමුවක් භාවිතා කරන අඩවි වලින් 10% ක් පමණක් මෙම මට්ටමට හෝ ඉහළ මට්ටමකට ළඟා වන බවයි. අනෙක් අතට, 90 වැනි ප්‍රතිශතය යනු කාසියේ අනෙක් පැත්තයි - එය අපට පෙන්නුම් කරන්නේ දේවල් කෙතරම් නරකද යන්නයි. 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 කේත ප්රමාණය
ජාවාස්ක්‍රිප්ට් කේත (KB) ප්රමාණය ඩෙස්ක්ටොප් උපාංග වෙත මාරු කර ඇත
ප්‍රතිශත
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 කේත ප්රමාණය
අපි කතා කරන්නේ අඩවි උපාංග වෙත යවන JS කේතයේ ප්රමාණය ගැන පමණක් නම්, ඔබ අපේක්ෂා කළ හැකි පරිදි සියල්ල දිස්වේ. එනම්, එක් රාමුවක් භාවිතා කරන්නේ නම්, මෙයින් අදහස් කරන්නේ පරිපූර්ණ තත්වයකදී වුවද, වෙබ් අඩවිය සඳහා JavaScript කේතයේ පරිමාව වැඩි වන බවයි. මෙය පුදුමයට කරුණක් නොවේ - ඔබට JavaScript රාමුවක් වෙබ් අඩවියක පදනම බවට පත් කළ නොහැකි අතර ව්යාපෘතිය සඳහා JS කේතයේ ප්රමාණය ඉතා අඩු වනු ඇතැයි අපේක්ෂා කරන්න.
මෙම දත්තවල සිත්ගන්නා කරුණ නම්, සමහර රාමු සහ පුස්තකාල අනෙක් ඒවාට වඩා ව්‍යාපෘතියක් සඳහා හොඳ ආරම්භක ස්ථාන ලෙස සැලකිය හැකිය. jQuery සහිත වෙබ් අඩවි වඩාත් හොඳින් පෙනේ. ඔවුන්ගේ ඩෙස්ක්ටොප් අඩවි වල සියලුම අඩවි වලට වඩා 15% වැඩි JavaScript අඩංගු වන අතර ඔවුන්ගේ ජංගම අඩවි වල 18% වැඩි JavaScript අඩංගු වේ. (පිළිගන්නවා මෙහි දත්තවල යම් වක්‍රතාවයක් තිබෙනවා. බොහෝ වෙබ් අඩවි වල jQuery තිබෙන බව පිළිගත යුතුයි. ඒ නිසා එවැනි වෙබ් අඩවි අනෙක් ඒවාට වඩා මුළු අඩවි ගණනට සමීපව සම්බන්ධ වීම ස්වභාවිකයි. කෙසේ වෙතත් මෙය බලපාන්නේ කෙසේද? මූලාශ්‍ර දත්ත එක් එක් රාමුව සඳහා ප්‍රතිදානය වේ.)
15-18% කේත වර්ධනය සැලකිය යුතු අගයක් වන අතර, අනෙකුත් රාමු සහ පුස්තකාල හා සසඳන විට, jQuery විසින් පනවන ලද බද්ද ඉතා අඩුය. 10 වැනි ප්‍රතිශතයේ කෝණික අඩවි සියලුම අඩවි වලට වඩා 344% වැඩි දත්ත ඩෙස්ක්ටොප් උපාංග වෙත යවන අතර ජංගම උපාංග වෙත 377% වැඩි ය. ප්රතික්රියා අඩවි ඊළඟ බරම වන අතර, සියලුම අඩවි වලට වඩා 193% වැඩි කේතයක් ඩෙස්ක්ටොප් උපාංග වෙත යවන අතර, ජංගම උපාංග සඳහා 270% වැඩි ය.
රාමුවක් භාවිතා කිරීම යනු එහි වැඩ ආරම්භයේදීම ව්‍යාපෘතියට යම් කේතයක් ඇතුළත් වන බව මම කලින් සඳහන් කළත්, කෙසේ හෝ සංවර්ධකයා සීමා කිරීමට රාමුවට හැකි වනු ඇතැයි මම බලාපොරොත්තු වෙමි. විශේෂයෙන්ම, අපි උපරිම කේතය සීමා කිරීම ගැන කතා කරමු.
සිත්ගන්නා කරුණ නම් jQuery අඩවි මෙම අදහස අනුගමනය කිරීමයි. ඒවා 10 වැනි ප්‍රතිශත මට්ටමේ දී, සියලුම අඩවි වලට වඩා තරමක් බරින් යුක්ත වුවද (15-18% කින්), ඒවා 90 වැනි ප්‍රතිශතයේ මට්ටමේදී, සියලුම අඩවි වලට වඩා තරමක් සැහැල්ලු ය - ඩෙස්ක්ටොප් සහ ජංගම අනුවාද දෙකෙහිම 3% කින් පමණ. මෙය ඉතා වැදගත් ප්‍රතිලාභයක් බව පැවසිය නොහැක, නමුත් jQuery අඩවි වල අවම වශයෙන් ඒවායේ විශාලතම අනුවාදවල පවා විශාල JavaScript කේත ප්‍රමාණයන් නොමැති බව පැවසිය හැකිය.
නමුත් වෙනත් රාමු සම්බන්ධයෙන්ද එයම කිව නොහැක.
10 වැනි ප්‍රතිශතයේ දී මෙන්ම, කෝණික සහ ප්රතික්රියා වල 90 වැනි ප්‍රතිශත අඩවි වෙනත් අඩවි වලින් වෙනස් වේ, නමුත් අවාසනාවකට, නරක අතට ඒවා වෙනස් වේ.
90 වැනි ප්‍රතිශතයේ දී, කෝණික අඩවි සියලුම අඩවි වලට වඩා ජංගම උපාංග වෙත 141% වැඩි දත්ත යවන අතර, ඩෙස්ක්ටොප් උපාංග වෙත 159% වැඩි ය. ප්රතික්රියා අඩවි සියලුම අඩවි වලට වඩා 73%ක් ඩෙස්ක්ටොප් උපාංග වෙත යවන අතර ජංගම උපාංග වෙත 58%ක් වැඩියෙන් යවයි. 90 වැනි ප්‍රතිශතයේ ප්රතික්රියා අඩවි වල කේත ප්රමාණය 2197.8 KB වේ. මෙයින් අදහස් කරන්නේ මෙම වෙබ් අඩවි ඔවුන්ගේ සමීපතම Vue මත පදනම් වූ තරඟකරුවන්ට වඩා ජංගම උපාංග වෙත 322.9 KB වැඩි දත්ත යවන බවයි. Angular සහ React මත පදනම් වූ desktop අඩවි සහ අනෙකුත් අඩවි අතර පරතරය ඊටත් වඩා වැඩිය. උදාහරණයක් ලෙස, ප්රතික්රියා ඩෙස්ක්ටොප් අඩවි සමාන Vue අඩවි වලට වඩා 554.7 KB වැඩි JS කේතයක් උපාංග වෙත යවයි.
ප්‍රධාන නූලෙහි JavaScript කේතය සැකසීමට ගතවන කාලය
ඉහත දත්ත පැහැදිලිව පෙන්නුම් කරන්නේ අධ්‍යයනය කරන ලද රාමු සහ පුස්තකාල භාවිතා කරන වෙබ් අඩවි වල විශාල JavaScript කේත අඩංගු වන බවයි. නමුත්, ඇත්ත වශයෙන්ම, මෙය අපගේ සමීකරණයේ එක් කොටසක් පමණි.
ජාවාස්ක්‍රිප්ට් කේතය බ්‍රවුසරයට පැමිණි පසු, එය ක්‍රියාකාරී තත්ත්වයකට ගෙන ඒමට අවශ්‍ය වේ. ප්‍රධාන බ්‍රව්සර් ත්‍රෙඩ් එකේ කේතය සමඟ සිදු කළ යුතු ක්‍රියා නිසා විශේෂයෙන් බොහෝ ගැටලු ඇති වේ. පරිශීලක ක්‍රියාවන් සැකසීම, මෝස්තර ගණනය කිරීම සහ පිටු පිරිසැලසුම ගොඩනැගීම සහ ප්‍රදර්ශනය කිරීම සඳහා ප්‍රධාන නූල වගකිව යුතුය. ඔබ ප්‍රධාන ත්‍රෙඩ් එක ජාවාස්ක්‍රිප්ට් කර්තව්‍යයන් සමඟ යටපත් කළහොත්, වෙනත් කාර්යයන් නියමිත වේලාවට සම්පූර්ණ කිරීමට එයට අවස්ථාව නොලැබේ. මෙය පිටු වල ක්රියාකාරිත්වයේ ප්රමාදයන් සහ "තිරිංග" වලට මග පාදයි.
HTTP සංරක්ෂිත දත්ත ගබඩාවේ V8 එන්ජිමේ ප්‍රධාන නූල් මත JavaScript කේතය සැකසීමට කොපමණ කාලයක් ගතවේද යන්න පිළිබඳ තොරතුරු අඩංගු වේ. මෙයින් අදහස් කරන්නේ අපට මෙම දත්ත එකතු කර විවිධ අඩවි වල ජාවාස්ක්‍රිප්ට් සැකසීමට ප්‍රධාන නූල් කොපමණ කාලයක් ගතවේද යන්න ඉගෙන ගත හැකි බවයි.
ජංගම උපාංගවල ස්ක්‍රිප්ට් සැකසීමට අදාළ 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
ජංගම උපාංගවල ස්ක්‍රිප්ට් සැකසීමට අදාළ CPU කාලය
ඩෙස්ක්ටොප් උපාංගවල ස්ක්‍රිප්ට් සැකසීමට අදාළ 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
ඩෙස්ක්ටොප් උපාංගවල ස්ක්‍රිප්ට් සැකසීමට අදාළ CPU කාලය
මෙහිදී ඔබට ඉතා හුරුපුරුදු දෙයක් දැකිය හැකිය.
ආරම්භකයින් සඳහා, jQuery සහිත අඩවි අනෙක් ඒවාට වඩා ප්‍රධාන නූල් මත JavaScript සැකසීමට සැලකිය යුතු තරම් අඩු මුදලක් වැය කරයි. 10 වැනි ප්‍රතිශතයේ දී, සියලුම අඩවි හා සසඳන විට, ජංගම උපාංගවල jQuery අඩවි ප්‍රධාන නූල් මත JS කේතය සැකසීමට 61% වැඩි කාලයක් ගත කරයි. ඩෙස්ක්ටොප් jQuery අඩවි සම්බන්ධයෙන් ගත් කල, සැකසුම් කාලය 37% කින් වැඩි වේ. 90 වැනි ප්‍රතිශතයේදී, jQuery අඩවිවල ලකුණු සමස්ථ ලකුණුවලට ඉතා ආසන්නය. විශේෂයෙන්ම, ජංගම උපාංග වල jQuery අඩවි ප්‍රධාන ත්‍රෙඩ් එකේ සියලුම අඩවි වලට වඩා 1.3% අඩු කාලයක් ගත කරන අතර ඩෙස්ක්ටොප් උපාංග වල ප්‍රධාන ත්‍රෙඩ් එකේ 0.7% අඩු කාලයක් ගත කරයි.
අපගේ ශ්‍රේණිගත කිරීමේ අනෙක් පැත්තේ ප්‍රධාන නූල් මත ඇති විශාලතම බර මගින් සංලක්ෂිත රාමු ඇත. මෙය නැවතත්, Angular සහ React වේ. ඒවා අතර ඇති එකම වෙනස නම්, කෝණික අඩවි ප්රතික්රියා අඩවි වලට වඩා විශාල කේත ප්‍රමාණයක් බ්‍රව්සර් වෙත යවන නමුත්, කෝණික අඩවි වල කේතය සැකසීමට අඩු CPU කාලයක් ගත වීමයි. ගොඩක් අඩුයි.
10 වැනි ප්‍රතිශතයේ දී, කෝණික ඩෙස්ක්ටොප් අඩවි සියලුම අඩවි වලට වඩා JS කේතය සැකසීමට 230% වැඩි ප්‍රධාන නූල් කාලය වැය කරයි. ජංගම අඩවි සඳහා මෙම අගය 313% කි. ප්රතික්රියා අඩවි නරකම කාර්ය සාධනයක් ඇත. ඩෙස්ක්ටොප් උපාංගවල ඔවුන් සියලු අඩවි වලට වඩා 248% වැඩි කාලයක් සැකසුම් කේතයක් වැය කරයි, සහ ජංගම උපාංගවල ඔවුන් 658% වැඩි කාලයක් සැකසුම් කේතයක් වැය කරයි. 658% යතුරු ලියන දෝෂයක් නොවේ. 10 වැනි ප්‍රතිශතයේ දී, ප්රතික්රියා අඩවි ඔවුන්ගේ පවතින කේතය සැකසීම සඳහා ප්‍රධාන නූල් කාලයෙන් තත්පර 2.7ක් වැය කරයි.
මෙම විශාල සංඛ්‍යා හා සසඳන විට 90 වැනි ප්‍රතිශත සංඛ්‍යා අවම වශයෙන් මඳක් යහපත් බව පෙනේ. කෝණික ව්‍යාපෘති, සියලුම අඩවි හා සසඳන විට, ඩෙස්ක්ටොප් උපාංගවල ප්‍රධාන නූල්වල 29% වැඩි කාලයක් ගත කරන අතර ජංගම උපාංගවල 27% වැඩි කාලයක් ගත කරයි. ප්රතික්රියා අඩවි සම්බන්ධයෙන් ගත් කල, සමාන දර්ශක පිළිවෙලින් 130% සහ 98% ලෙස පෙනේ.
90 වැනි ප්‍රතිශතය සඳහා වන අපගමන ප්‍රතිශතය 10 වැනි ප්‍රතිශතය සඳහා සමාන අගයන්ට වඩා හොඳින් පෙනේ. නමුත් මෙහිදී කාලය පෙන්නුම් කරන සංඛ්‍යා තරමක් බියජනක බව මතක තබා ගැනීම වටී. අපි කියමු - React මත ගොඩනගා ඇති වෙබ් අඩවියක් සඳහා ජංගම උපාංගයක ප්‍රධාන නූලෙහි තත්පර 20.8. (මෙම කාලය තුළ ඇත්ත වශයෙන්ම සිදුවන්නේ කුමක්ද යන්න පිළිබඳ කතාව වෙනම ලිපියකට සුදුසු යැයි මම විශ්වාස කරමි).
මෙහි එක් විය හැකි සංකූලතාවයක් ඇත (ස්තුතියි මෙම විශේෂාංගය වෙත මගේ අවධානය යොමු කිරීම සඳහා සහ මෙම දෘෂ්ටි කෝණයෙන් දත්ත ප්රවේශමෙන් පරීක්ෂා කිරීම සඳහා). කාරණය නම් බොහෝ වෙබ් අඩවි ඉදිරිපස මෙවලම් කිහිපයක් භාවිතා කරයි. විශේෂයෙන්ම, මෙම වෙබ් අඩවි jQuery වෙතින් වෙනත් රාමු හෝ පුස්තකාල වෙත සංක්‍රමණය වන බැවින් බොහෝ වෙබ් අඩවි ප්රතික්රියා හෝ Vue සමඟ jQuery භාවිතා කරන බව මම දැක ඇත්තෙමි. එහි ප්රතිඵලයක් වශයෙන්, මම දත්ත සමුදාය වෙත ආපසු ගියෙමි, මෙවර React, jQuery, Angular හෝ Vue පමණක් භාවිතා කළ අඩවි වලට අනුරූප වන සබැඳි පමණක් තෝරාගෙන, නමුත් ඒවායේ කිසිදු සංයෝජනයක් නොවේ. මෙන්න මට ලැබුණු දේ.
අඩවි එක් රාමුවක් පමණක් හෝ එක් පුස්තකාලයක් පමණක් භාවිතා කරන අවස්ථා වලදී ජංගම උපාංගවල ස්ක්‍රිප්ට් සැකසීමට අදාළ ප්‍රොසෙසර කාලය (මිලි තත්පර වලින්)
ප්‍රතිශත
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
කෝණික පමණක් භාවිතා කරන අඩවි
1328.9
2151.9
3695.3
6629.3
11607.7
React පමණක් භාවිතා කරන වෙබ් අඩවි
2443.2
4620.5
10061.4
17074.3
24956.3
අඩවි එක් රාමුවක් පමණක් හෝ එක් පුස්තකාලයක් පමණක් භාවිතා කරන තත්වයක් තුළ ජංගම උපාංගවල ස්ක්‍රිප්ට් සැකසීමට අදාළ ප්‍රොසෙසර කාලය
පළමුව, පුදුමයට කරුණක් නොවන දෙයක්: වෙබ් අඩවියක් එක් රාමුවක් හෝ එක් පුස්තකාලයක් පමණක් භාවිතා කරන විට, එවැනි වෙබ් අඩවියක කාර්ය සාධනය බොහෝ විට වැඩි දියුණු වේ. එක් එක් උපකරණය සඳහා කාර්ය සාධනය 10 වැනි සහ 25 වැනි ප්‍රතිශතවල වඩා හොඳින් පෙනේ. එය අර්ථවත් කරයි. එක් රාමුවක් භාවිතයෙන් සාදන ලද වෙබ් අඩවියක් රාමු දෙකක් හෝ වැඩි ගණනක් භාවිතා කර සාදන ලද වෙබ් අඩවියකට වඩා වේගවත් විය යුතුය.
ඇත්ත වශයෙන්ම, එක් කුතුහලය දනවන ව්‍යතිරේකයක් සමඟින්, අප විසින් පරීක්ෂා කරන ලද සෑම ඉදිරිපස මෙවලමක් සඳහාම ලකුණු සෑම අවස්ථාවකදීම වඩා හොඳින් දිස් විය. මා පුදුමයට පත් කළ දෙය නම්, 50 වැනි ප්‍රතිශත සහ ඊට ඉහළින්, React භාවිතා කරන අඩවි ඔවුන් භාවිතා කරන එකම පුස්තකාලය වන විට වඩාත් නරක ලෙස ක්‍රියා කරයි. මාර්ගය වන විට, මම මෙම දත්ත මෙහි ඉදිරිපත් කිරීමට හේතුව මෙයයි.
මෙය ටිකක් අමුතුයි, නමුත් මම තවමත් මෙම අමුතුකම සඳහා පැහැදිලි කිරීමක් සෙවීමට උත්සාහ කරමි.
ව්‍යාපෘතියක් ප්රතික්රියා සහ jQuery යන දෙකම භාවිතා කරන්නේ නම්, එම ව්යාපෘතිය jQuery සිට ප්රතික්රියා වෙත සංක්‍රමණය වීමේ ක්‍රියාවලියේ අතරමග කොතැනක හෝ විය හැකිය. සමහර විට ඔහුට මෙම පුස්තකාල මිශ්‍ර වූ කේත පදනමක් තිබේ. ප්රතික්රියා අඩවි වලට වඩා jQuery අඩවි ප්‍රධාන ත්‍රෙඩ් මත අඩු කාලයක් ගත කරන බව අප දැනටමත් දැක ඇති බැවින්, jQuery හි යම් ක්‍රියාකාරීත්වයක් ක්‍රියාත්මක කිරීම වෙබ් අඩවියේ ක්‍රියාකාරිත්වය මඳක් වැඩි දියුණු කිරීමට උපකාරී වන බව මෙය අපට පැවසිය හැකිය.
නමුත් ව්යාපෘතිය jQuery සිට React දක්වා ගමන් කරන අතර වැඩි වැඩියෙන් React මත රඳා පවතින විට තත්වය වෙනස් වේ. වෙබ් අඩවිය සැබවින්ම උසස් තත්ත්වයේ සාදා ඇත්නම් සහ අඩවි සංවර්ධකයින් ප්රවේශමෙන් ප්රතික්රියා භාවිතා කරන්නේ නම්, එවැනි වෙබ් අඩවියක් සමඟ සියල්ල හොඳින් සිදුවනු ඇත. නමුත් සාමාන්‍ය ප්රතික්රියා අඩවිය සඳහා, ප්රතික්රියා පුළුල් ලෙස භාවිතා කිරීම යනු ප්‍රධාන නූල් වැඩි බරකට යටත් වන බවයි.
ජංගම සහ ඩෙස්ක්ටොප් උපාංග අතර පරතරය
මම දත්ත දෙස බැලූ තවත් ක්‍රමයක් නම් ජංගම සහ ඩෙස්ක්ටොප් අත්දැකීම් අතර පරතරය කෙතරම් විශාලද යන්න ගවේෂණය කිරීමයි. අපි ජාවාස්ක්‍රිප්ට් කේතයේ වෙළුම් සංසන්දනය කිරීම ගැන කතා කරන්නේ නම්, එවැනි සැසඳීමක් භයානක කිසිවක් හෙළි නොකරයි. ඇත්ත වශයෙන්ම, බාගත හැකි කේත කුඩා ප්‍රමාණයක් දැකීම සතුටක් වනු ඇත, නමුත් ජංගම සහ ඩෙස්ක්ටොප් කේතයේ ප්‍රමාණයේ විශාල වෙනසක් නොමැත.
නමුත් ඔබ කේතය සැකසීමට ගතවන කාලය විශ්ලේෂණය කරන්නේ නම්, ජංගම සහ ඩෙස්ක්ටොප් උපාංග අතර ඉතා විශාල පරතරයක් දක්නට ලැබේ.
ඩෙස්ක්ටොප් ඒවාට සාපේක්ෂව ජංගම උපාංගවල ස්ක්‍රිප්ට් සැකසීමට අදාළ කාලය (ප්‍රතිශතයෙන්) වැඩි වීම
ප්‍රතිශත
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 වැනි ප්‍රතිශතයේ දී පවා, ප්රතික්රියා අඩවි ඩෙස්ක්ටොප් ප්‍රධාන ත්‍රෙඩ් එකට වඩා ජංගම ප්‍රධාන නූල් මත 431.5% වැඩි කාලයක් ගත කරයි. jQuery හි කුඩාම පරතරය ඇත, නමුත් මෙහි පවා අනුරූප අගය 188.2% වේ. වෙබ් අඩවි සංවර්ධකයින් ඔවුන්ගේ ව්‍යාපෘති සැකසීමට වැඩි CPU කාලයක් අවශ්‍ය වන ආකාරයෙන් සාදන විට (මෙය සිදුවන්නේ මෙයයි, එය කාලයත් සමඟ නරක අතට හැරේ), අඩු බල උපාංගවල හිමිකරුවන්ට ඒ සඳහා ගෙවීමට සිදුවේ.
ප්රතිඵල
හොඳ රාමු මඟින් වෙබ් ව්‍යාපෘති ගොඩ නැගීම සඳහා සංවර්ධකයින්ට හොඳ පදනමක් ලබා දිය යුතුය (ආරක්ෂාව, ප්‍රවේශ්‍යතාව, කාර්ය සාධනය අනුව) හෝ එම සීමාවන් උල්ලංඝනය කරන දෙයක් නිර්මාණය කිරීමට අපහසු වන පරිදි ගොඩනඟන ලද සීමා කිරීම් තිබිය යුතුය.
මෙය වෙබ් ව්‍යාපෘතිවල ක්‍රියාකාරීත්වයට අදාළ නොවන බව පෙනේ (සහ පෙනෙන පරිදි ඒවායේ ).
ප්රතික්රියා හෝ කෝණික අඩවි අනෙක් ඒවාට වඩා කේත සැකසීමට වැඩි CPU කාලයක් ගත කළ පමණින් ප්රතික්රියා අඩවි ක්‍රියාත්මක වන විට Vue අඩවි වලට වඩා CPU තීව්‍ර බව අවශ්‍යයෙන්ම අදහස් නොවන බව සඳහන් කිරීම වටී. ඇත්ත වශයෙන්ම, අපි බැලූ දත්ත රාමු සහ පුස්තකාලවල මෙහෙයුම් කාර්ය සාධනය ගැන පවසන්නේ ඉතා අල්ප වශයෙනි. දැනුවත්ව හෝ නොදැනුවත්ව මෙම රාමු ක්‍රමලේඛකයින් දෙසට තල්ලු කළ හැකි සංවර්ධන ප්‍රවේශයන් ගැන ඔවුන් වැඩිපුර කතා කරයි. අපි කතා කරන්නේ රාමු සඳහා ලියකියවිලි, ඒවායේ පරිසර පද්ධතිය සහ පොදු සංවර්ධන ශිල්පීය ක්‍රම ගැන ය.
අප මෙහි විශ්ලේෂණය නොකළ දෙයක් සඳහන් කිරීම වටී, එනම්, වෙබ් අඩවියේ පිටු අතර සංක්‍රමණය වන විට උපාංගය ජාවාස්ක්‍රිප්ට් කේතය ක්‍රියාත්මක කිරීමට කොපමණ කාලයක් ගත කරයිද යන්න. SPA සඳහා වන තර්කය නම්, තනි පිටු යෙදුම බ්‍රවුසරයට පූරණය කළ පසු, පරිශීලකයාට න්‍යායාත්මකව, වෙබ් අඩවියේ පිටු වෙත වේගයෙන් ප්රවේශ වීමට හැකි වනු ඇති බවයි. මෙය සත්‍යයට වඩා බොහෝ දුරස් බව මගේම අත්දැකීම මට කියයි. නමුත් මෙම ගැටළුව පැහැදිලි කිරීමට අපට දත්ත නොමැත.
පැහැදිලිව පෙනෙන දෙය නම්, ඔබ වෙබ් අඩවියක් නිර්මාණය කිරීම සඳහා රාමුවක් හෝ පුස්තකාලයක් භාවිතා කරන්නේ නම්, ඔබ ව්යාපෘතිය මුලින් පූරණය කිරීම සහ එය යාමට සූදානම් වීම සම්බන්ධයෙන් සම්මුතියක් ඇති කර ගනී. මෙය වඩාත් ධනාත්මක අවස්ථා සඳහා පවා අදාළ වේ.
සුදුසු අවස්ථාවන්හිදී යම් සම්මුතීන් ඇති කර ගත හැකි නමුත්, සංවර්ධකයින් දැනුවත්ව එවැනි සම්මුතීන් සිදු කිරීම වැදගත් වේ.
නමුත් අපට ශුභවාදී වීමට හේතුවක් ද තිබේ. ක්‍රෝම් සංවර්ධකයින් එම මෙවලම්වල ක්‍රියාකාරීත්වය වැඩි දියුණු කිරීම සඳහා අපි ආවරණය කර ඇති සමහර ඉදිරිපස මෙවලම් පිටුපස සිටින අය සමඟ කෙතරම් සමීපව ක්‍රියා කරනවාද යන්න මා දිරිමත් කරයි.
කෙසේ වෙතත්, මම ප්රායෝගික පුද්ගලයෙකි. නව ගෘහ නිර්මාණ ශිල්පය ඒවා විසඳන විට කාර්ය සාධන ගැටළු ඇති කරයි. ඒ වගේම අඩුපාඩු නැති කරන්න කාලයක් යනවා. අප එය බලාපොරොත්තු නොවිය යුතු සේම සියලුම කාර්ය සාධන ගැටළු විසඳනු ඇත, අපගේ ප්‍රියතම රාමු වල නව අනුවාද වලින් ඔබ මෙය බලාපොරොත්තු නොවිය යුතුය.
ඔබට මෙම ද්‍රව්‍යයේ සාකච්ඡා කර ඇති ඉදිරිපස මෙවලම් වලින් එකක් භාවිතා කිරීමට අවශ්‍ය නම්, මෙයින් අදහස් කරන්නේ අහම්බෙන්, ඔබේ ව්‍යාපෘතියේ ක්‍රියාකාරිත්වයට හානියක් නොවන බව සහතික කිරීමට ඔබට අමතර උත්සාහයන් දැරීමට සිදුවන බවයි. ඔබ නව රාමුවක් භාවිතා කිරීමට පෙර සලකා බැලිය යුතු කරුණු කිහිපයක් මෙන්න:
- සාමාන්‍ය බුද්ධියෙන් ඔබව පරීක්ෂා කරන්න. ඔබ තෝරාගත් රාමුව භාවිතා කිරීමට ඔබට ඇත්තටම අවශ්යද? Pure JavaScript අද ගොඩක් දේවල් කරන්න පුළුවන්.
- ඔබ තෝරා ගන්නා රාමුවට (Preact, Svelte හෝ වෙනත් යමක් වැනි) එම රාමුවේ හැකියාවන්ගෙන් 90%ක් ඔබට ලබා දිය හැකි සැහැල්ලු විකල්පයක් තිබේද?
- ඔබ දැනටමත් රාමුවක් භාවිතා කරන්නේ නම්, වඩා හොඳ, වඩා ගතානුගතික, සම්මත විකල්ප ලබා දෙන යමක් තිබේදැයි සිතා බලන්න (උදාහරණයක් ලෙස, Vue වෙනුවට Nuxt.js, React වෙනුවට Next.js, ආදිය).
- ඔබගේ කුමක් වනු ඇත JavaScript කාර්ය සාධනය?
- කොහොමද ඔයාට පුළුවන් අවශ්‍ය ප්‍රමාණයට වඩා වැඩි JavaScript කේතයක් ව්‍යාපෘතියකට හඳුන්වා දීම දුෂ්කර කිරීමට සංවර්ධන ක්‍රියාවලිය?
- ඔබ සංවර්ධනයේ පහසුව සඳහා රාමුවක් භාවිතා කරන්නේ නම්, සලකා බලන්න ගනුදෙනුකරුවන්ට රාමු කේතය යවන්න. සමහරවිට ඔබට සේවාදායකයේ ඇති සියලුම ගැටළු විසඳිය හැකිද?
සාමාන්‍යයෙන්, ඉදිරිපස කෙළවර සංවර්ධනය කිරීමට ඔබ හරියටම තෝරා ගන්නේ කුමක් වුවත්, මෙම අදහස් වඩාත් සමීපව බැලීම වටී. නමුත් ඔබ ආරම්භ කිරීමට කාර්ය සාධනය නොමැති ව්‍යාපෘතියක වැඩ කරන විට ඒවා විශේෂයෙන් වැදගත් වේ.
හිතවත් පා readers කයින්! පරිපූර්ණ JavaScript රාමුව ලෙස ඔබ දකින්නේ කුමක්ද?
මූලාශ්රය: www.habr.com