جاوا اسڪرپٽ فريم ورڪ جي قيمت

ويب سائيٽ کي سست ڪرڻ جو ڪو به تيز طريقو ناهي (مقصد جو مقصد) ان تي جاوا اسڪرپٽ ڪوڊ جو هڪ گروپ استعمال ڪرڻ کان. جڏهن جاوا اسڪرپٽ استعمال ڪندي، توهان کي ان جي قيمت ادا ڪرڻو پوندو منصوبن جي ڪارڪردگي سان چار ڀيرا کان گهٽ ناهي. هتي اهو آهي ته سائيٽ جو جاوا اسڪرپٽ ڪوڊ صارفين جي سسٽم کي ڪيئن لوڊ ڪري ٿو:

• نيٽ ورڪ تي فائل ڊائون لوڊ ڪندي.
• ڊائون لوڊ ڪرڻ کان پوءِ انپيڪ ٿيل سورس ڪوڊ کي پارس ڪرڻ ۽ گڏ ڪرڻ.
• جاوا اسڪرپٽ ڪوڊ جي عملدرآمد.
• ياداشت جي استعمال.

هي ميلاپ نڪرندو آهي تمام مھانگو.

۽ اسان اسان جي منصوبن ۾ وڌيڪ ۽ وڌيڪ JS ڪوڊ شامل ڪندا آهيون. جيئن ته تنظيمون فريم ورڪ ۽ لائبريرين جهڙوڪ React، Vue ۽ ٻين ذريعي طاقتور سائيٽن ڏانهن منتقل ٿيون، اسان سائيٽن جي بنيادي ڪارڪردگي جو تمام گهڻو انحصار JavaScript تي ڪري رهيا آهيون.

مون جاوا اسڪرپٽ فريم ورڪ استعمال ڪندي تمام گھڻيون وڏيون سائيٽون ڏٺيون آھن. پر ان مسئلي بابت منهنجو نظريو انتهائي متعصب آهي. حقيقت اها آهي ته اهي ڪمپنيون جن سان آئون ڪم ڪريان ٿو مون ڏانهن صحيح طور تي ڇو ته اهي سائيٽ جي ڪارڪردگي جي ميدان ۾ پيچيده مسئلن سان منهن ڏئي رهيا آهن. نتيجي طور، مون کي تجسس پيدا ٿيو ته هي مسئلو ڪيترو عام آهي، ۽ اسان ڪهڙي قسم جي "سزا" ادا ڪندا آهيون جڏهن اسان هڪ يا ٻئي فريم ورڪ کي ڪنهن خاص سائيٽ جي بنياد طور چونڊيو ٿا.

پروجيڪٽ مون کي اهو سمجهڻ ۾ مدد ڪئي. ايڇ ٽي پي آرڪائيو.

انگن اکرن

HTTP آرڪائيو پروجيڪٽ مجموعي طور تي 4308655 لنڪس کي باقاعده ڊيسڪ ٽاپ سائيٽن ۽ 5484239 لنڪس کي موبائيل سائيٽن ڏانهن ٽريڪ ڪري ٿو. انهن لنڪن سان لاڳاپيل ڪيترن ئي ميٽرڪ جي وچ ۾ لاڳاپيل سائيٽن تي مليل ٽيڪنالاجيز جي هڪ فهرست آهي. ان جو مطلب اهو آهي ته اسان هزارين سائيٽن جو نمونو ڪري سگهون ٿا جيڪي مختلف فريم ورڪ ۽ لائبريريون استعمال ڪن ٿا ۽ ڄاڻون ٿا ته اهي ڪيترا ڪوڊ ڪلائنٽ ڏانهن موڪليندا آهن ۽ ڪيترو لوڊ اهو ڪوڊ صارفين جي سسٽم تي ٺاهي ٿو.

مون مارچ 2020 ڊيٽا گڏ ڪيو، جيڪو سڀ کان تازو ڊيٽا هو جنهن تائين مون تائين رسائي هئي.

مون فيصلو ڪيو ته سڀني سائيٽن تي گڏ ڪيل HTTP آرڪائيو ڊيٽا کي گڏ ڪرڻ جي ڊيٽا سان گڏ سائيٽن جي ڊيٽا سان ملن ٿا React، Vue، ۽ Angular استعمال ڪندي، جيتوڻيڪ مون ٻين ذريعن جي مواد کي پڻ استعمال ڪرڻ تي غور ڪيو.

ان کي وڌيڪ دلچسپ بڻائڻ لاءِ، مون سائيٽون پڻ شامل ڪيون جيڪي jQuery استعمال ڪن ٿيون ماخذ ڊيٽا سيٽ تي. هي لائبريري اڃا تائين تمام مشهور آهي. اهو پڻ متعارف ڪرايو ويب ڊولپمينٽ لاءِ هڪ مختلف طريقي سان سنگل پيج ايپليڪيشن (SPA) ماڊل جي ڀيٽ ۾ پيش ڪيل React، Vue ۽ Angular.

HTTP آرڪائيو ۾ لنڪس سائيٽن جي نمائندگي ڪن ٿيون جيڪي مليا آهن دلچسپي جي ٽيڪنالاجي استعمال ڪندي

فريم ورڪ يا لائبريري
موبائل سائيٽن جي لنڪ
باقاعده سائيٽن جي لنڪ

jQuery
4615474
3714643

تصديق ڪريو
489827
241023

وو
85649
43691

ڪنڊول
19423
18088

اميدون ۽ خواب

ان کان اڳ جو اسان ڊيٽا جي تجزيي تي وڃو، مان ان بابت ڳالهائڻ چاهيان ٿو جيڪو مان اميد ڪرڻ چاهيان ٿو.

مان سمجهان ٿو ته هڪ مثالي دنيا ۾، فريم ورڪ کي ڊولپرز جي ضرورتن کي پورو ڪرڻ کان ٻاهر وڃڻ گهرجي ۽ اسان جي سائيٽن سان ڪم ڪندڙ اوسط صارف کي ڪجهه خاص فائدو فراهم ڪرڻ گهرجي. ڪارڪردگي صرف انهن فائدن مان هڪ آهي. اهو آهي جتي رسائي ۽ سيڪيورٽي راند ۾ اچي ٿي. پر هي صرف سڀ کان اهم آهي.

تنهن ڪري، هڪ مثالي دنيا ۾، ڪجهه قسم جي فريم ورڪ کي هڪ اعلي ڪارڪردگي سائيٽ ٺاهڻ آسان بڻائي ٿي. اهو يا ته ان حقيقت جي ڪري ڪيو وڃي ٿو ته فريم ورڪ ڊولپر کي هڪ مهذب بنياد ڏئي ٿو جنهن تي هڪ پروجيڪٽ ٺاهي، يا حقيقت اها آهي ته اهو ترقي تي پابنديون لاڳو ڪري ٿو، ان لاءِ گهربل ضرورتون پيش ڪري ٿو جيڪا ڪنهن شيءِ جي ترقي کي پيچيده ڪري ٿي. سست ٿيڻ لاءِ.

بهترين فريم ورڪ ٻنهي کي ڪرڻ گهرجي: سٺو بنياد ڏيو، ۽ ڪم تي پابنديون لاڳو ڪريو، توهان کي هڪ مهذب نتيجو حاصل ڪرڻ جي اجازت ڏئي ٿي.

ڊيٽا جي وچين قدرن جو تجزيو ڪرڻ سان اسان کي اها معلومات نه ملندي جيڪا اسان کي گهربل هجي. ۽، حقيقت ۾، هي طريقو اسان جي ڌيان کان ٻاهر نڪري ٿو تمام گهڻو اهم. ان جي بدران، مون وٽ ڊيٽا مان فيصد نڪتل. اهي 10، 25، 50 (ميڊين)، 75، 90 سيڪڙو آهن.

مان خاص طور تي 10th ۽ 90th سيڪڙو ۾ دلچسپي وٺان ٿو. 10th فيصد هڪ خاص فريم ورڪ لاء تمام بهترين ڪارڪردگي جي نمائندگي ڪري ٿو (يا گهٽ ۾ گهٽ يا گهٽ ۾ گهٽ بهترين جي ويجهو). ٻين لفظن ۾، هن جو مطلب اهو آهي ته صرف 10٪ سائيٽون هڪ خاص فريم ورڪ استعمال ڪندي هن سطح تي، يا وڌيڪ. 90 سيڪڙو سيڪڙو، ٻئي طرف، سڪي جو ٻيو پاسو آهي - اهو اسان کي ڏيکاري ٿو ته ڪيئن خراب شيون حاصل ڪري سگهن ٿيون. 90 پرسنٽائل اهي سائيٽون آهن جيڪي پوئتي آهن - اهي هيٺيون 10٪ سائيٽون جن وٽ تمام گهڻو JS ڪوڊ آهي يا انهن جي ڪوڊ کي مکيه سلسلي تي پروسيس ڪرڻ لاءِ تمام ڊگهو وقت آهي.

جاوا اسڪرپٽ ڪوڊ جا حجم

شروع ڪرڻ سان، نيٽ ورڪ تي مختلف سائيٽن پاران منتقل ڪيل جاوا اسڪرپٽ ڪوڊ جي ماپ جو تجزيو ڪرڻ لاءِ سمجھ ۾ اچي ٿو.

جاوا اسڪرپٽ ڪوڊ جو مقدار (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 

Angular سائيٽون
445.1 
675.6 
1066.4 
1761.5 
2893.2 

React سائيٽون
345.8 
441.6 
690.3 
1238.5 
1893.6 

جاوا اسڪرپٽ ڪوڊ جو مقدار موبائيل ڊوائيسز تي موڪليو ويو

جاوا اسڪرپٽ ڪوڊ جو مقدار (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 

Angular سائيٽون
468.8 
716.9 
1144.2 
1930.0 
3283.1 

React سائيٽون
308.6 
469.0 
841.9 
1472.2 
2197.8 

جاوا اسڪرپٽ ڪوڊ جو مقدار ڊيسڪ ٽاپ ڊوائيسز تي موڪليو ويو

جيڪڏهن اسان صرف JS ڪوڊ جي سائيز جي باري ۾ ڳالهايون ٿا جيڪي سائيٽون ڊوائيسز ڏانهن موڪليندا آهن، پوء هر شي جي باري ۾ نظر اچي ٿي جيئن توهان توقع ڪري سگهو ٿا. يعني، جيڪڏهن فريم ورڪ مان هڪ استعمال ڪيو وڃي، ان جو مطلب اهو آهي ته هڪ مثالي صورتحال ۾، سائيٽ جي جاوا اسڪرپٽ ڪوڊ جو حجم وڌندو. اها تعجب جي ڳالهه ناهي - توهان جاوا اسڪرپٽ فريم ورڪ کي سائيٽ جو بنياد نه ٿا بڻائي سگهو ۽ اميد رکو ته پروجيڪٽ جي JS ڪوڊ جو حجم تمام گهٽ هوندو.

هن ڊيٽا جي باري ۾ ڇا قابل ذڪر آهي ته ڪجهه فريم ورڪ ۽ لائبريريون سمجهي سگهجن ٿيون هڪ منصوبي لاء ٻين جي ڀيٽ ۾ هڪ بهتر شروعاتي نقطو. jQuery سان سائيٽون بھترين نظر اچن ٿيون. سائيٽن جي ڊيسڪ ٽاپ ورزن تي، اھي سڀني سائيٽن جي ڀيٽ ۾ 15٪ وڌيڪ جاوا اسڪرپٽ تي مشتمل آھن، ۽ موبائل تي اھي 18٪ وڌيڪ آھن. (اعتراف سان، هتي ڪجهه ڊيٽا ڪرپشن آهي. حقيقت اها آهي ته jQuery ڪيترن ئي سائيٽن تي موجود آهي، تنهنڪري اهو صرف قدرتي آهي ته اهڙيون سائيٽون ٻين سائيٽن جي مجموعي تعداد سان گڏ ٻين جي ڀيٽ ۾ وڌيڪ ويجهي سان لاڳاپيل آهن. جڏهن ته، اهو اثر انداز نٿو ڪري ته ڪيئن خام آهي. ڊيٽا هر فريم ورڪ جي پيداوار آهي.)

جڏهن ته ڪوڊ جي مقدار ۾ 15-18٪ اضافو هڪ قابل ذڪر انگ آهي، ان جي مقابلي ۾ ٻين فريم ورڪ ۽ لائبريرين سان، هڪ اهو نتيجو ڪري سگهي ٿو ته jQuery پاران "ٽيڪس" تمام گهٽ آهي. 10 هين فيصد ۾ ڪوئلي سائيٽون سڀني سائيٽن جي ڀيٽ ۾ ڊيسڪ ٽاپ تي 344٪ وڌيڪ ڊيٽا موڪلين ٿيون، ۽ موبائل ڏانهن 377٪ وڌيڪ. React سائيٽون سڀ کان وڏيون آهن، موڪليندي 193% وڌيڪ ڪوڊ ڊيسڪ ٽاپ تي سڀني سائيٽن کان، ۽ 270% وڌيڪ موبائل ڏانهن.

ان کان اڳ، مون ذڪر ڪيو ته جيتوڻيڪ فريم ورڪ استعمال ڪرڻ جو مطلب آهي ته ڪوڊ جي هڪ خاص رقم منصوبي ۾ شامل ڪيو ويندو، ان تي ڪم جي شروعات ۾، مون کي اميد آهي ته فريم ورڪ ڪنهن به طرح ڊولپر کي محدود ڪرڻ جي قابل هوندو. خاص طور تي، اسان ڪوڊ جي وڌ ۾ وڌ مقدار کي محدود ڪرڻ بابت ڳالهائي رهيا آهيون.

دلچسپ ڳالهه اها آهي ته jQuery سائيٽون هن خيال جي پيروي ڪندا آهن. جڏهن ته اهي 10هين پرسنٽائل (15-18% جي حساب سان) تي سڀني سائيٽن کان ٿورو وڌيڪ آهن، اهي ڊيسڪ ٽاپ ۽ موبائيل ٻنهي تي لڳ ڀڳ 90% تي 3هين فيصد تي ٿورو هلڪي آهن. اهو چوڻ نه آهي ته اهو هڪ تمام اهم فائدو آهي، پر اهو چئي سگهجي ٿو ته jQuery سائيٽون، گهٽ ۾ گهٽ، وڏي جاوا اسڪرپٽ ڪوڊ سائيز نه آهن، جيتوڻيڪ انهن جي وڏين نسخن ۾.

پر ساڳئي طرح ٻين فريم ورڪ جي باري ۾ نه ٿو چئي سگهجي.

جيئن ته 10th فيصد جي صورت ۾، Angular ۽ React تي 90th سيڪڙو سائيٽن تي ٻين سائيٽن کان مختلف آهن، پر اهي مختلف آهن، بدقسمتي سان، بدترين لاء.

90th سيڪڙو تي، Angular سائيٽون موڪلين ٿيون 141% وڌيڪ ڊيٽا موبائل ڏانهن سڀني سائيٽن کان، ۽ 159% وڌيڪ ڊيسڪٽاپ ڏانهن. React سائيٽون موڪلين ٿيون 73% وڌيڪ ڊيسڪ ٽاپ تي سڀني سائيٽن کان، ۽ 58% وڌيڪ موبائل ڏانهن. 90th فيصد تي React سائيٽن جو ڪوڊ سائيز 2197.8 KB آهي. هن جو مطلب اهو آهي ته اهڙيون سائيٽون 322.9 KB وڌيڪ ڊيٽا موڪلين ٿيون موبائل ڊوائيس تي انهن جي ويجهن حریفن جي ڀيٽ ۾ Vue جي بنياد تي. Angular ۽ React ۽ ٻين سائيٽن تي ٻڌل ڊيسڪ ٽاپ سائيٽن جي وچ ۾ فرق اڃا به وڏو آهي. مثال طور، ڊيسڪ ٽاپ ريڪٽ سائيٽون 554.7 KB وڌيڪ JS ڪوڊ موڪلين ٿيون ڊوائيسز تي برابر Vue سائيٽن کان.

مکيه سلسلي ۾ جاوا اسڪرپٽ ڪوڊ کي پروسيس ڪرڻ لاء وقت ورتو ويو

مٿي ڄاڻايل ڊيٽا واضح طور تي ظاهر ڪري ٿو ته فريم ورڪ استعمال ڪندي سائيٽون ۽ مطالعي هيٺ لائبريريون جاوا اسڪرپٽ ڪوڊ جي وڏي مقدار تي مشتمل آهن. پر يقينا، اهو اسان جي مساوات جو صرف هڪ حصو آهي.

برائوزر ۾ جاوا اسڪرپٽ ڪوڊ اچڻ کان پوء، ان کي قابل عمل حالت ۾ آڻڻ جي ضرورت آهي. خاص طور تي ڪيترائي مسئلا انهن عملن جي ڪري آهن جيڪي مکيه برائوزر سلسلي ۾ ڪوڊ سان گڏ ڪيا ويندا آهن. مکيه موضوع صارف جي عملن جي پروسيسنگ، اندازن جي حساب سان، صفحي جي ترتيب جي تعمير ۽ نمائش لاء ذميوار آهي. جيڪڏهن توهان جاوا اسڪرپٽ جي ڪمن سان مکيه ٿريڊ کي ختم ڪريو ٿا، ان کي وقت ۾ باقي ڪم مڪمل ڪرڻ جو موقعو نه هوندو. اهو دير جي ڪري ٿو ۽ "بريڪ" صفحن جي ڪم ۾.

HTTP آرڪائيو ڊيٽابيس وٽ معلومات آهي ته اهو V8 انجڻ جي مکيه سلسلي ۾ JavaScript ڪوڊ کي پروسيس ڪرڻ ۾ ڪيترو وقت وٺندو آهي. ان جو مطلب اهو آهي ته اسان هن ڊيٽا کي گڏ ڪري سگهون ٿا ۽ معلوم ڪري سگهون ٿا ته مکيه موضوع ڪيتري وقت وٺندو آهي مختلف سائيٽن جي جاوا اسڪرپٽ کي پروسيس ڪرڻ لاء.

پروسيسر جو وقت (ملي سيڪنڊن ۾) موبائل ڊوائيسز تي اسڪرپٽ پروسيسنگ سان لاڳاپيل

سيڪڙو
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

Angular سائيٽون
1471.3
2380.1
4118.6
7450.8
13296.4

React سائيٽون
2700.1
5090.3
9287.6
14509.6
20813.3

موبائيل ڊوائيسز تي اسڪرپٽ پروسيسنگ سان لاڳاپيل پروسيسر وقت

پروسيسر وقت (ملي سيڪنڊن ۾) ڊيسڪ ٽاپ ڊوائيسز تي اسڪرپٽ پروسيسنگ سان لاڳاپيل

سيڪڙو
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

Angular سائيٽون
482.2
777.9
1365.5
2400.6
4171.8

React سائيٽون
508.0
1045.6
2121.1
4235.1
7444.3

ڊيسڪ ٽاپ ڊوائيسز تي اسڪرپٽ پروسيسنگ سان لاڳاپيل پروسيسر وقت

هتي توهان کي تمام گهڻو واقف ڏسي سگهو ٿا.

شروعات ڪندڙن لاءِ، jQuery جون سائيٽون ٻين سائيٽن جي ڀيٽ ۾ مکيه موضوع تي جاوا اسڪرپٽ پروسيسنگ تي تمام گھٽ خرچ ڪن ٿيون. 10هين فيصد تي، سڀني سائيٽن جي مقابلي ۾، موبائيل تي jQuery سائيٽون 61٪ وڌيڪ وقت خرچ ڪن ٿيون مکيه موضوع تي JS ڪوڊ پروسيسنگ. ڊيسڪ ٽاپ jQuery سائيٽن جي صورت ۾، پروسيسنگ وقت 37٪ وڌائي ٿو. 90 سيڪڙو تي، jQuery سائيٽون مجموعي اسڪور جي تمام ويجھو اسڪور ڪن ٿيون. خاص طور تي، موبائل ڊوائيسز تي jQuery سائيٽون سڀني سائيٽن جي ڀيٽ ۾ مکيه موضوع تي 1.3٪ گهٽ وقت گذاريندا آهن، ۽ ڊيسڪ ٽاپ ڊوائيسز تي 0.7٪ گهٽ وقت.

اسان جي درجه بندي جي ٻئي پاسي فريم ورڪ آهن جيڪي مکيه موضوع تي سڀ کان وڌيڪ لوڊ سان منسوب ڪيا ويا آهن. هي آهي، ٻيهر، Angular ۽ React. ٻنهي جي وچ ۾ فرق صرف اهو آهي ته جڏهن Angular سائيٽون React سائيٽن جي ڀيٽ ۾ برائوزرن ڏانهن وڌيڪ ڪوڊ موڪلينديون آهن، Angular سائيٽون ڪوڊ کي پروسيس ڪرڻ لاءِ گهٽ سي پي يو وقت وٺنديون آهن. تمام گھٽ.

10هين پرسنٽائل تي، ڊيسڪ ٽاپ اينگولر سائيٽون 230٪ وڌيڪ وقت خرچ ڪن ٿيون مکيه ٿريڊ پروسيسنگ JS ڪوڊ تي سڀني سائيٽن جي ڀيٽ ۾. موبائل سائيٽن لاء، هي انگ 313٪ آهي. React سائيٽون بدترين ڪارڪردگي ڪندڙ آهن. ڊيسڪ ٽاپ تي، اهي خرچ ڪن ٿا 248٪ وڌيڪ وقت پروسيسنگ ڪوڊ سڀني سائيٽن کان، ۽ 658٪ وڌيڪ موبائل تي. 658٪ هڪ ٽائپ نه آهي. 10هين پرسنٽائل تي، React سائيٽون 2.7 سيڪنڊن جو مکيه ٿريڊ وقت خرچ ڪن ٿيون انهن جي ڪوڊ کي پروسيس ڪندي.

90 سيڪڙو سيڪڙو، جڏهن انهن وڏن انگن جي مقابلي ۾، گهٽ ۾ گهٽ ٿورو بهتر نظر اچي ٿو. سڀني سائيٽن جي مقابلي ۾، Angular پروجيڪٽ 29٪ وڌيڪ وقت ڊيسڪ ٽاپ ڊوائيسز تي مکيه سلسلي ۾، ۽ 27٪ وڌيڪ وقت موبائل ڊوائيسز تي. React سائيٽن جي صورت ۾، ساڳيا انگ اکر نظر اچن ٿا 130٪ ۽ 98٪، ترتيب سان.

90هين پرسنٽائل لاءِ سيڪڙو انحراف 10هين پرسنٽائل لاءِ ملندڙ قدرن کان بهتر نظر اچن ٿا. پر هتي اهو ياد رکڻ جي قابل آهي ته انگن اکرن جو اشارو وقت بلڪه خوفناڪ آهي. اچو ته 20.8 سيڪنڊن تي مکيه موبائيل ٿريڊ تي ري ايڪٽ سان ٺهيل ويب سائيٽ لاءِ. (منهنجو خيال آهي ته هن دور ۾ اصل ۾ ڇا ٿئي ٿو، جي ڪهاڻي هڪ الڳ مضمون جي لائق آهي).

هتي هڪ امڪاني پيچيدگي آهي (مهرباني يرمياه ھن خصوصيت ڏانھن منھنجو ڌيان ڇڪائڻ لاءِ، ۽ ھن نقطي کان ڊيٽا کي احتياط سان غور ڪرڻ لاءِ). حقيقت اها آهي ته ڪيتريون ئي سائيٽون استعمال ڪن ٿيون ڪيترن ئي سامهون-آخر اوزار. خاص طور تي، مون ڏٺو آهي ڪيتريون ئي سائيٽون jQuery استعمال ڪندي React يا 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

سائيٽون جيڪي صرف Angular استعمال ڪن ٿيون
1328.9
2151.9
3695.3
6629.3
11607.7

سائيٽون جيڪي صرف React استعمال ڪن ٿيون
2443.2
4620.5
10061.4
17074.3
24956.3

پروسيسر وقت موبائل ڊوائيسز تي پروسيسنگ اسڪرپٽ سان لاڳاپيل هڪ صورتحال ۾ جتي سائيٽون صرف هڪ فريم ورڪ استعمال ڪن ٿيون، يا صرف هڪ لائبريري

پهرين، ڪا شيء جيڪا حيرت انگيز نه آهي: جڏهن هڪ سائيٽ صرف هڪ فريم ورڪ يا هڪ لائبريري استعمال ڪري ٿي، اهڙي سائيٽ جي ڪارڪردگي گهڻو ڪري بهتر نه ٿيندي. هر اوزار 10th ۽ 25th سيڪڙو تي بهتر ڪارڪردگي ڏيکاري ٿو. اهو سمجهه ۾ اچي ٿو. هڪ سائيٽ جيڪا هڪ فريم ورڪ استعمال ڪندي ٺاهي وئي آهي انهي سائيٽ کان بهتر ڪم ڪرڻ گهرجي جيڪا ٻه يا وڌيڪ فريم ورڪ يا لائبريري استعمال ڪندي ٺاهي وئي آهي.

حقيقت ۾، مطالعي جي هر سامهون واري اوزار جي ڪارڪردگي سڀني صورتن ۾ بهتر نظر اچي ٿي، سواء هڪ دلچسپ استثنا جي. مون کي حيران ڪندڙ ڳالهه اها هئي ته 50 سيڪڙو ۽ ان کان مٿي تي، ريڪٽ استعمال ڪندي سائيٽون خراب ڪم ڪن ٿيون جڏهن ريڪٽ ئي لائبريري آهي جيڪا اهي استعمال ڪن ٿيون. اهو، رستي جي ذريعي، اهو ئي سبب هو ته آئون هن ڊيٽا کي هتي پيش ڪريان.

اهو ٿورڙو عجيب آهي، پر مان اڃا تائين هن عجيب جي وضاحت لاء ڳولڻ جي ڪوشش ڪندس.

جيڪڏهن هڪ پروجيڪٽ React ۽ jQuery ٻنهي کي استعمال ڪري ٿو، ته پوءِ اهو پروجيڪٽ ممڪن آهي ته jQuery کان React تائين منتقلي جي ذريعي اڌ رستي تي. شايد ان ۾ ڪو ڪوڊ بيس هجي جتي اهي لائبريريون مليل آهن. جيئن ته اسان اڳ ۾ ئي ڏٺو آهي ته jQuery سائيٽون React سائيٽن جي ڀيٽ ۾ مکيه موضوع تي گهٽ وقت گذارينديون آهن، اهو شايد اسان کي ٻڌائي ٿو ته jQuery ۾ ڪجهه ڪارڪردگي کي لاڳو ڪرڻ سائيٽ کي ڪجهه بهتر ڪارڪردگي ۾ مدد ڪري ٿي.

پر جيئن ته پروجيڪٽ jQuery کان رد عمل ڏانهن منتقلي ۽ React تي وڌيڪ انحصار ڪري ٿو، شيون تبديل ٿي رهيون آهن. جيڪڏهن سائيٽ واقعي اعليٰ معيار جي آهي، ۽ سائيٽ ڊولپر استعمال ڪن ٿا React احتياط سان، ته پوءِ اهڙي سائيٽ سان سڀ ڪجهه ٺيڪ ٿي ويندو. پر سراسري 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

Angular سائيٽون
205.1
206.0
201.6
210.4
218.7

React سائيٽون
431.5
386.8
337.9
242.6
179.6

جڏهن ته هڪ فون ۽ هڪ ليپ ٽاپ جي وچ ۾ ڪوڊ پروسيسنگ جي رفتار ۾ ڪجهه فرق جي توقع ڪئي وڃي ٿي، اهڙين وڏي تعداد مون کي ٻڌايو ته جديد فريم ورڪ ڪافي حد تائين گهٽ طاقت واري ڊوائيسز تي حدف نه آهن، ۽ اهي اهي خلا کي بند ڪرڻ جي ڪوشش ڪري رهيا آهن جيڪي انهن دريافت ڪيا آهن. ايستائين جو 10 سيڪڙو تي، ريڪٽ سائيٽون 431.5٪ وڌيڪ وقت گذارين ٿيون موبائل مين ٿريڊ تي ڊيسڪ ٽاپ جي مکيه ٿريڊ جي ڀيٽ ۾. jQuery ۾ سڀ کان ننڍو خال آھي، پر ھتي ھتي به ملندڙ انگ 188.2٪ آھي. جڏهن ويب سائيٽ ڊولپرز پنهنجا پروجيڪٽ اهڙي طريقي سان ٺاهيندا آهن ته انهن جي پروسيسنگ کي وڌيڪ پروسيسر وقت جي ضرورت هوندي آهي (۽ اهو ٿئي ٿو، ۽ اهو صرف وقت سان وڌيڪ خراب ٿئي ٿو)، گهٽ طاقتور ڊوائيسز جي مالڪن کي ان لاء ادا ڪرڻو پوندو.

نتيجو

سٺي فريم ورڪ کي ڊولپرز کي ويب منصوبن جي تعمير لاءِ سٺو بنياد ڏيڻ گهرجي (سيڪيورٽي، رسائي، ڪارڪردگي جي لحاظ کان)، يا انهن ۾ تعمير ٿيل پابنديون هجڻ گهرجن جيڪي انهن پابندين جي خلاف ورزي ڪرڻ واري شيءِ ٺاهڻ ۾ سختي ڪن ٿيون.

اهو ظاهر نٿو ٿئي ته ويب پروجيڪٽ جي ڪارڪردگي تي لاڳو ٿئي ٿو (۽ شايد انهن تي نه پهچ).

اها ڳالهه نوٽ ڪرڻ جي قابل آهي ته صرف ان ڪري ته React يا Angular سائيٽون ٻين جي ڀيٽ ۾ ڪوڊ تيار ڪرڻ ۾ وڌيڪ CPU وقت خرچ ڪن ٿيون، ان جو مطلب اهو ناهي ته React سائيٽون هلندڙ وقت Vue سائيٽن کان وڌيڪ سي پي يو عمدي آهن. حقيقت ۾، ڊيٽا جيڪو اسان جائزو ورتو آهي، فريم ورڪ ۽ لائبريرين جي آپريشنل ڪارڪردگي بابت تمام ٿورڙو چوي ٿو. اهي ترقي جي طريقن بابت وڌيڪ ڳالهائي رهيا آهن، شعوري طور تي يا نه، اهي فريم ورڪ پروگرامرز کي ڌڪ ڏيئي سگهن ٿا. اسان فريم ورڪ لاء دستاويزن جي باري ۾ ڳالهائي رهيا آهيون، انهن جي ماحولياتي نظام بابت، عام ترقي جي ٽيڪنالاجي بابت.

اهو پڻ ذڪر ڪرڻ جي قابل آهي جيڪو اسان هتي تجزيو نه ڪيو آهي، يعني، ڊوائيس ڪيترو وقت خرچ ڪري ٿو جاوا اسڪرپٽ ڪوڊ تي عمل ڪرڻ ۾ جڏهن سائيٽ جي صفحن جي وچ ۾ نيويگيٽ ڪريو. SPA جي حق ۾ دليل اهو آهي ته هڪ ڀيرو هڪ صفحي جي ايپليڪيشن برائوزر ۾ لوڊ ٿي ويندي آهي، صارف نظرياتي طور تي سائيٽ جي صفحن کي تيزيء سان کولڻ جي قابل هوندو. منهنجو پنهنجو تجربو ٻڌائي ٿو ته اها حقيقت کان پري آهي. پر اسان وٽ هن مسئلي کي واضح ڪرڻ لاء ڊيٽا نه آهي.

ڇا پڌرو آهي ته جيڪڏهن توهان ويب سائيٽ ٺاهڻ لاءِ فريم ورڪ يا لائبريري استعمال ڪري رهيا آهيو، توهان شروعاتي طور تي پروجيڪٽ کي لوڊ ڪرڻ ۽ ان کي وڃڻ لاءِ تيار ٿيڻ جي لحاظ کان سمجھوتا ​​ڪري رهيا آهيو. اهو سڀ کان وڌيڪ مثبت حالتن تي لاڳو ٿئي ٿو.

اهو مڪمل طور تي ممڪن آهي ته مناسب حالتن ۾ ڪجهه سمجهوتو ڪرڻ، پر اهو ضروري آهي ته ڊولپرز اهڙا سمجھوتا ​​شعوري طور تي ڪن.

پر اسان وٽ پڻ اميد جو سبب آهي. مان پرجوش آهيان اهو ڏسڻ لاءِ ته ڪروم ڊولپر ڪيتري ويجهڙائي سان ڪم ڪري رهيا آهن ڊولپرز سان ڪجهه فرنٽ اينڊ ٽولز جن جو اسان جائزو ورتو آهي انهن اوزارن جي ڪارڪردگي کي بهتر ڪرڻ ۾ مدد ڪرڻ جي ڪوشش ۾.

بهرحال، مان هڪ عملي ماڻهو آهيان. نون تعميرات ڪارڪردگي جي مسئلن کي ٺاهيندا آهن جيئن اهي انهن کي حل ڪن ٿا. ۽ ان کي درست ڪرڻ لاء وقت لڳن ٿا. جيئن اسان کي اميد نه رکڻ گهرجي نئين نيٽ ورڪ ٽيڪنالاجيون ڪارڪردگي جي سڀني مسئلن کي حل ڪندو، توهان کي اسان جي پسنديده فريم ورڪ جي نئين نسخن مان اها اميد نه رکڻ گهرجي.

جيڪڏھن توھان چاھيو ٿا ھڪڙو استعمال ڪرڻ چاھيو ٿا فرنٽ-آخر اوزارن مان جيڪو ھن مضمون ۾ بحث ڪيو ويو آھي، ان جو مطلب آھي ته توھان کي اضافي ڪوشش ڪرڻي پوندي توھان جي پروجيڪٽ جي ڪارڪردگي کي نقصان نه پھچائڻ لاءِ. نئين فريم ورڪ کي شروع ڪرڻ کان پهريان غور ڪرڻ لاء هتي ڪجهه غور آهن:

• پنهنجو پاڻ کي عام احساس سان جانچيو. ڇا توھان واقعي کي منتخب ٿيل فريم ورڪ کي استعمال ڪرڻ جي ضرورت آھي؟ خالص جاوا اسڪرپٽ اڄ تمام گهڻو قابل آهي.
• ڇا چونڊيل فريم ورڪ لاءِ ڪو لائٽر متبادل آهي (جهڙوڪ Preact، Svelte يا ٻيو ڪجهه) جيڪو توهان کي هن فريم ورڪ جي 90 سيڪڙو صلاحيتون ڏئي سگهي ٿو؟
• جيڪڏهن توهان اڳ ۾ ئي هڪ فريم ورڪ استعمال ڪري رهيا آهيو، غور ڪريو ته ڇا ڪا شيءِ آهي جيڪا پيش ڪري ٿي بهتر، وڌيڪ قدامت پسند، معياري آپشن (مثال طور Nuxt.js بدران Vue، Next.js بدران React، وغيره).
• تنهنجو ڇا ٿيندو بجيٽ جاوا اسڪرپٽ ڪارڪردگي؟
• توهان ڪيئن ڪري سگهو ٿا حد هڪ ترقياتي عمل ان کي ڏکيو بنائڻ لاء وڌيڪ جاوا اسڪرپٽ ڪوڊ هڪ پروجيڪٽ ۾ انجڻ ڪرڻ بلڪل ضروري آهي؟
• جيڪڏهن توهان ترقي جي آسانيءَ لاءِ فريم ورڪ استعمال ڪري رهيا آهيو، غور ڪريو ڇا توهان کي ضرورت آهي گراهڪن کي فريم ورڪ ڪوڊ موڪليو. ٿي سگهي ٿو توهان سرور تي سڀ مسئلا حل ڪري سگهو ٿا؟

عام طور تي اهي خيال ڏسڻ جي قابل هوندا آهن، قطع نظر ته توهان فرنٽ-اينڊ ڊولپمينٽ لاءِ ڇا چونڊيو آهي. پر اهي خاص طور تي اهم آهن جڏهن توهان هڪ پروجيڪٽ تي ڪم ڪري رهيا آهيو جنهن ۾ شروعات کان ڪارڪردگي جي کوٽ آهي.

پيارا پڙهندڙن! توهان ڪيئن ٿا ڏسو مثالي جاوا اسڪرپٽ فريم ورڪ؟

جو ذريعو: www.habr.com