জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের মূল্য

একটি ওয়েবসাইট (শ্লেষের উদ্দেশ্য) ধীর করার জন্য এটিতে একগুচ্ছ জাভাস্ক্রিপ্ট কোড ব্যবহার করার চেয়ে দ্রুত উপায় নেই। জাভাস্ক্রিপ্ট ব্যবহার করার সময়, আপনাকে চারবার কম নয় এমন প্রকল্পগুলির কর্মক্ষমতা সহ এর জন্য অর্থ প্রদান করতে হবে। সাইটের জাভাস্ক্রিপ্ট কোড ব্যবহারকারীদের সিস্টেমগুলিকে কীভাবে লোড করে তা এখানে রয়েছে:

• নেটওয়ার্কের মাধ্যমে একটি ফাইল ডাউনলোড করা হচ্ছে।
• ডাউনলোডের পর প্যাক করা সোর্স কোড পার্সিং এবং কম্পাইল করা।
• জাভাস্ক্রিপ্ট কোড এক্সিকিউশন।
• মেমরি খরচ.

এই সমন্বয় সক্রিয় আউট খুবই মূল্যবান.

এবং আমরা আমাদের প্রকল্পগুলিতে আরও বেশি করে জেএস কোড অন্তর্ভুক্ত করি। যেহেতু সংগঠনগুলি ফ্রেমওয়ার্ক এবং লাইব্রেরি দ্বারা চালিত সাইটগুলির দিকে অগ্রসর হয় যেমন React, Vue এবং অন্যান্য, আমরা সাইটগুলির মূল কার্যকারিতাকে জাভাস্ক্রিপ্টের উপর অত্যন্ত নির্ভরশীল করে তুলছি৷

আমি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করে অনেক ভারী সাইট দেখেছি। কিন্তু বিষয়টি সম্পর্কে আমার দৃষ্টিভঙ্গি খুবই পক্ষপাতদুষ্ট। আসল বিষয়টি হ'ল আমি যে সংস্থাগুলির সাথে কাজ করি তারা অবিকল আমার দিকে ফিরে আসে কারণ তারা সাইটের পারফরম্যান্সের ক্ষেত্রে জটিল সমস্যার মুখোমুখি হয়। ফলস্বরূপ, আমি এই সমস্যাটি কতটা সাধারণ, এবং একটি নির্দিষ্ট সাইটের ভিত্তি হিসাবে এক বা অন্য কাঠামো বেছে নেওয়ার সময় আমরা কী ধরনের "জরিমানা" প্রদান করি সে সম্পর্কে আগ্রহী হয়ে উঠি।

প্রকল্পটি আমাকে এটি বের করতে সাহায্য করেছে। এইচটিটিপি সংরক্ষণাগার.

উপাত্ত

HTTP আর্কাইভ প্রকল্পটি নিয়মিত ডেস্কটপ সাইটের মোট 4308655টি লিঙ্ক এবং মোবাইল সাইটের 5484239টি লিঙ্ক ট্র্যাক করে। এই লিঙ্কগুলির সাথে যুক্ত অনেক মেট্রিক্সের মধ্যে সংশ্লিষ্ট সাইটগুলিতে পাওয়া প্রযুক্তিগুলির একটি তালিকা। এর মানে হল যে আমরা হাজার হাজার সাইটের নমুনা দিতে পারি যেগুলি বিভিন্ন ফ্রেমওয়ার্ক এবং লাইব্রেরি ব্যবহার করে এবং তারা ক্লায়েন্টদের কাছে কতটা কোড পাঠায় এবং ব্যবহারকারীদের সিস্টেমে এই কোডটি কতটা লোড তৈরি করে সে সম্পর্কে জানতে পারি।

আমি 2020 সালের মার্চের ডেটা সংগ্রহ করেছি, যেটি আমার কাছে সবচেয়ে সাম্প্রতিক ডেটা ছিল।

আমি সমস্ত সাইট জুড়ে একত্রিত HTTP আর্কাইভ ডেটার সাথে React, Vue এবং Angular ব্যবহার করে পাওয়া সাইটগুলির ডেটার সাথে তুলনা করার সিদ্ধান্ত নিয়েছি, যদিও আমি অন্যান্য উত্স উপাদান ব্যবহার করার কথা বিবেচনা করেছি৷

এটিকে আরও আকর্ষণীয় করতে, আমি সোর্স ডেটা সেটে jQuery ব্যবহার করে এমন সাইটগুলিও যোগ করেছি। এই লাইব্রেরি এখনও খুব জনপ্রিয়। এটি React, Vue এবং Angular দ্বারা অফার করা একক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) মডেলের চেয়ে ওয়েব বিকাশের জন্য একটি ভিন্ন পদ্ধতির প্রবর্তন করে।

HTTP আর্কাইভের লিঙ্কগুলি এমন সাইটগুলিকে প্রতিনিধিত্ব করে যেগুলি আগ্রহের প্রযুক্তি ব্যবহার করে দেখা গেছে৷

ফ্রেমওয়ার্ক বা লাইব্রেরি
মোবাইল সাইট লিঙ্ক
নিয়মিত সাইটের লিঙ্ক

jQuery এর
4615474
3714643

প্রতিক্রিয়া
489827
241023

দৃশ্য
85649
43691

কৌণিক
19423
18088

আশা ও স্বপ্ন

আমরা ডেটা বিশ্লেষণে যাওয়ার আগে, আমি কী আশা করতে চাই সে সম্পর্কে কথা বলতে চাই।

আমি বিশ্বাস করি যে একটি আদর্শ বিশ্বে, ফ্রেমওয়ার্কগুলিকে ডেভেলপারদের চাহিদা পূরণের বাইরে যেতে হবে এবং আমাদের সাইটের সাথে কাজ করা গড় ব্যবহারকারীদের কিছু নির্দিষ্ট সুবিধা প্রদান করা উচিত। পারফরম্যান্স কেবলমাত্র সেই সুবিধাগুলির মধ্যে একটি। এখানে অ্যাক্সেসযোগ্যতা এবং নিরাপত্তা খেলার মধ্যে আসে। কিন্তু এই শুধুমাত্র সবচেয়ে গুরুত্বপূর্ণ.

সুতরাং, একটি আদর্শ বিশ্বে, কিছু ধরণের কাঠামো একটি উচ্চ-পারফরম্যান্স সাইট তৈরি করা সহজ করে তুলবে৷ এটি হয় এই কারণে করা উচিত যে কাঠামোটি বিকাশকারীকে একটি প্রকল্প তৈরি করার জন্য একটি শালীন ভিত্তি দেয়, বা এটি উন্নয়নের উপর বিধিনিষেধ আরোপ করে, এটির জন্য প্রয়োজনীয়তাগুলি সামনে রাখে যা এমন কিছুর বিকাশকে জটিল করে তোলে ধীর হতে আউট.

সেরা কাঠামোর উভয়ই করা উচিত: একটি ভাল ভিত্তি দিন এবং কাজের উপর বিধিনিষেধ আরোপ করুন, আপনাকে একটি শালীন ফলাফল অর্জন করতে দেয়।

ডেটার মাঝারি মান বিশ্লেষণ করা আমাদের প্রয়োজনীয় তথ্য দেবে না। এবং, আসলে, এই পদ্ধতিটি আমাদের মনোযোগের বাইরে চলে যায় অনেক গুরুত্বপূর্ণ. পরিবর্তে, আমি আমার কাছে থাকা ডেটা থেকে শতাংশ প্রাপ্ত করেছি। এগুলি হল 10, 25, 50 (মিডিয়ান), 75, 90 শতাংশ।

আমি বিশেষ করে 10 তম এবং 90 তম পার্সেন্টাইলে আগ্রহী। 10 তম পার্সেন্টাইল একটি নির্দিষ্ট ফ্রেমওয়ার্কের জন্য খুব ভাল পারফরম্যান্স (বা অন্ততপক্ষে কম বা সেরার কাছাকাছি) উপস্থাপন করে। অন্য কথায়, এর মানে হল যে শুধুমাত্র 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 

কৌণিক সাইট
445.1 
675.6 
1066.4 
1761.5 
2893.2 

প্রতিক্রিয়া সাইট
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 

কৌণিক সাইট
468.8 
716.9 
1144.2 
1930.0 
3283.1 

প্রতিক্রিয়া সাইট
308.6 
469.0 
841.9 
1472.2 
2197.8 

ডেস্কটপ ডিভাইসে পাঠানো জাভাস্ক্রিপ্ট কোডের পরিমাণ

যদি আমরা কেবলমাত্র JS কোডের আকার সম্পর্কে কথা বলি যা সাইটগুলি ডিভাইসগুলিতে পাঠায়, তাহলে সবকিছু আপনার প্রত্যাশা অনুযায়ী দেখায়। যথা, যদি ফ্রেমওয়ার্কগুলির মধ্যে একটি ব্যবহার করা হয়, তাহলে এর অর্থ হল একটি আদর্শ পরিস্থিতিতেও, সাইটের জাভাস্ক্রিপ্ট কোডের ভলিউম বৃদ্ধি পাবে৷ এটি আশ্চর্যজনক নয় - আপনি একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ককে একটি সাইটের ভিত্তি করতে পারবেন না এবং আশা করতে পারেন যে প্রকল্পের জেএস কোডের ভলিউম খুব কম হবে৷

এই ডেটা সম্পর্কে উল্লেখযোগ্য যা কিছু ফ্রেমওয়ার্ক এবং লাইব্রেরি অন্যদের তুলনায় একটি প্রকল্পের জন্য একটি ভাল সূচনা পয়েন্ট হিসাবে বিবেচিত হতে পারে। jQuery সহ সাইটগুলি সেরা দেখায়। সাইটের ডেস্কটপ সংস্করণে, তারা সমস্ত সাইটের তুলনায় 15% বেশি জাভাস্ক্রিপ্ট ধারণ করে এবং মোবাইলে তারা 18% বেশি ধারণ করে। (অবশ্যই, এখানে কিছু ডেটা দুর্নীতি রয়েছে। আসল বিষয়টি হল যে jQuery অনেক সাইটে উপস্থিত রয়েছে, তাই এটি স্বাভাবিক যে এই ধরনের সাইটগুলি মোট সাইটের সংখ্যার সাথে অন্যদের তুলনায় বেশি ঘনিষ্ঠভাবে জড়িত। যাইহোক, এটি কতটা কাঁচা আছে তা প্রভাবিত করে না ডেটা প্রতিটি কাঠামোর জন্য আউটপুট।)

যদিও কোড ভলিউমের 15-18% বৃদ্ধি একটি উল্লেখযোগ্য চিত্র, অন্যান্য ফ্রেমওয়ার্ক এবং লাইব্রেরির সাথে এটি তুলনা করে, কেউ উপসংহারে আসতে পারে যে jQuery দ্বারা আরোপিত "কর" খুবই কম। 10ম পার্সেন্টাইলের কৌণিক সাইটগুলি সমস্ত সাইটের চেয়ে 344% বেশি ডেটা ডেস্কটপে পাঠায় এবং মোবাইলে 377% বেশি। প্রতিক্রিয়া সাইটগুলি পরবর্তীতে সবচেয়ে ভারী, সমস্ত সাইটের থেকে ডেস্কটপে 193% বেশি কোড পাঠায় এবং মোবাইলে 270% বেশি৷

এর আগে, আমি উল্লেখ করেছি যে যদিও একটি কাঠামো ব্যবহার করার অর্থ হল একটি নির্দিষ্ট পরিমাণ কোড প্রকল্পে অন্তর্ভুক্ত করা হবে, এটিতে কাজ করার একেবারে শুরুতে, আমি আশা করি যে কাঠামোটি কোনওভাবে বিকাশকারীকে সীমাবদ্ধ করতে সক্ষম হবে। বিশেষ করে, আমরা কোডের সর্বাধিক পরিমাণ সীমিত করার বিষয়ে কথা বলছি।

মজার বিষয় হল, jQuery সাইটগুলি এই ধারণাটি অনুসরণ করে। যদিও সেগুলি 10 তম পার্সেন্টাইলে (15-18% দ্বারা) সমস্ত সাইটের তুলনায় সামান্য ভারী, তারা ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই 90 তম পার্সেন্টাইলে প্রায় 3% এ কিছুটা হালকা। এটি বলার অপেক্ষা রাখে না যে এটি একটি খুব গুরুত্বপূর্ণ সুবিধা, তবে এটি বলা যেতে পারে যে jQuery সাইটগুলিতে অন্তত, বিশাল জাভাস্ক্রিপ্ট কোড আকার নেই, এমনকি তাদের বৃহত্তম সংস্করণেও।

কিন্তু অন্যান্য কাঠামো সম্পর্কে একই কথা বলা যাবে না।

ঠিক যেমন 10 তম পার্সেন্টাইলের ক্ষেত্রে, কৌণিক এবং প্রতিক্রিয়ার 90 তম পার্সেন্টাইল সাইটে অন্যান্য সাইট থেকে আলাদা, কিন্তু দুর্ভাগ্যবশত, খারাপের জন্য তারা আলাদা।

90 তম পার্সেন্টাইলে, কৌণিক সাইটগুলি সমস্ত সাইটের তুলনায় মোবাইলে 141% বেশি ডেটা পাঠায় এবং ডেস্কটপে 159% বেশি। প্রতিক্রিয়া সাইটগুলি সমস্ত সাইটের চেয়ে 73% বেশি ডেস্কটপে এবং 58% বেশি মোবাইলে পাঠায়৷ 90 তম পার্সেন্টাইলে প্রতিক্রিয়া সাইটগুলির কোডের আকার হল 2197.8 KB৷ এর মানে হল যে এই ধরনের সাইটগুলি Vue-এর উপর ভিত্তি করে তাদের নিকটতম প্রতিযোগীদের তুলনায় মোবাইল ডিভাইসে 322.9 KB বেশি ডেটা পাঠায়। অ্যাঙ্গুলার এবং রিঅ্যাক্ট এবং অন্যান্য সাইটের উপর ভিত্তি করে ডেস্কটপ সাইটগুলির মধ্যে ব্যবধান আরও বড়। উদাহরণস্বরূপ, ডেস্কটপ রিঅ্যাক্ট সাইটগুলি সমতুল্য Vue সাইটের তুলনায় ডিভাইসগুলিতে 554.7 KB বেশি JS কোড পাঠায়।

মূল থ্রেডে জাভাস্ক্রিপ্ট কোড প্রক্রিয়া করতে সময় লাগে

উপরের ডেটা স্পষ্টভাবে নির্দেশ করে যে অধ্যয়নের অধীনে ফ্রেমওয়ার্ক এবং লাইব্রেরিগুলি ব্যবহার করা সাইটগুলিতে প্রচুর পরিমাণে জাভাস্ক্রিপ্ট কোড রয়েছে৷ তবে অবশ্যই, এটি আমাদের সমীকরণের একটি অংশ মাত্র।

জাভাস্ক্রিপ্ট কোড ব্রাউজারে আসার পরে, এটি একটি কার্যকরী অবস্থায় আনতে হবে। বিশেষত অনেক সমস্যা সেই ক্রিয়াগুলির দ্বারা সৃষ্ট হয় যা মূল ব্রাউজার থ্রেডের কোডের সাথে সম্পাদন করতে হয়। মূল থ্রেড ব্যবহারকারীর ক্রিয়াকলাপ প্রক্রিয়াকরণ, শৈলী গণনা করার জন্য, পৃষ্ঠার বিন্যাস তৈরি এবং প্রদর্শনের জন্য দায়ী। আপনি যদি জাভাস্ক্রিপ্টের কাজগুলি দিয়ে মূল থ্রেডটিকে আচ্ছন্ন করে ফেলেন, তবে এটি সময়মতো বাকি কাজগুলি সম্পূর্ণ করার সুযোগ পাবে না। এটি পৃষ্ঠাগুলির কাজে বিলম্ব এবং "ব্রেক" বাড়ে।

এইচটিটিপি আর্কাইভ ডাটাবেসে V8 ইঞ্জিনের মূল থ্রেডে জাভাস্ক্রিপ্ট কোড প্রক্রিয়া করতে কতক্ষণ লাগে সে সম্পর্কে তথ্য রয়েছে। এর মানে হল যে আমরা এই ডেটা সংগ্রহ করতে পারি এবং বিভিন্ন সাইটের জাভাস্ক্রিপ্ট প্রক্রিয়া করতে মূল থ্রেডটি কতটা সময় নেয় তা খুঁজে বের করতে পারি।

মোবাইল ডিভাইসে স্ক্রিপ্ট প্রক্রিয়াকরণের সাথে সম্পর্কিত প্রসেসরের সময় (মিলিসেকেন্ডে)

শতকরা
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

মোবাইল ডিভাইসে স্ক্রিপ্ট প্রক্রিয়াকরণ সম্পর্কিত প্রসেসর সময়

ডেস্কটপ ডিভাইসে স্ক্রিপ্ট প্রক্রিয়াকরণ সম্পর্কিত প্রসেসর সময় (মিলিসেকেন্ডে)

শতকরা
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

ডেস্কটপ ডিভাইসে স্ক্রিপ্ট প্রক্রিয়াকরণের সাথে সম্পর্কিত প্রসেসর সময়

এখানে আপনি খুব পরিচিত কিছু দেখতে পারেন.

প্রারম্ভিকদের জন্য, jQuery সহ সাইটগুলি অন্যান্য সাইটের তুলনায় প্রধান থ্রেডে জাভাস্ক্রিপ্ট প্রক্রিয়াকরণে উল্লেখযোগ্যভাবে কম খরচ করে। 10ম পার্সেন্টাইলে, সমস্ত সাইটের তুলনায়, মোবাইলে jQuery সাইটগুলি মূল থ্রেডে JS কোড প্রক্রিয়াকরণে 61% বেশি সময় ব্যয় করে। ডেস্কটপ jQuery সাইটের ক্ষেত্রে, প্রক্রিয়াকরণের সময় 37% বৃদ্ধি পায়। 90 তম পার্সেন্টাইলে, jQuery সাইটগুলি মোট স্কোরের খুব কাছাকাছি স্কোর করে। বিশেষত, মোবাইল ডিভাইসে jQuery সাইটগুলি সমস্ত সাইটের তুলনায় মূল থ্রেডে 1.3% কম সময় এবং ডেস্কটপ ডিভাইসগুলিতে 0.7% কম সময় ব্যয় করে।

আমাদের রেটিং অন্য দিকে প্রধান থ্রেড সর্বোচ্চ লোড দ্বারা চিহ্নিত করা হয় যে কাঠামো. এটি আবার, কৌণিক এবং বিক্রিয়া। উভয়ের মধ্যে পার্থক্য হল যখন কৌণিক সাইটগুলি প্রতিক্রিয়া সাইটগুলির চেয়ে ব্রাউজারগুলিতে বেশি কোড পাঠায়, কৌণিক সাইটগুলি কোড প্রক্রিয়া করতে কম CPU সময় নেয়। অনেক কম.

10ম পার্সেন্টাইলে, ডেস্কটপ অ্যাঙ্গুলার সাইটগুলি সমস্ত সাইটের তুলনায় JS কোড প্রক্রিয়াকরণের প্রধান থ্রেডে 230% বেশি সময় ব্যয় করে। মোবাইল সাইটের জন্য, এই সংখ্যা 313%। প্রতিক্রিয়া সাইটগুলি সবচেয়ে খারাপ পারফরমার। ডেস্কটপে, তারা সমস্ত সাইটের তুলনায় 248% বেশি সময় কোড প্রসেসিং করে এবং মোবাইলে 658% বেশি সময় ব্যয় করে৷ 658% একটি টাইপো নয়। 10 তম পার্সেন্টাইলে, প্রতিক্রিয়া সাইটগুলি তাদের কোড প্রক্রিয়াকরণের প্রধান থ্রেড সময় 2.7 সেকেন্ড ব্যয় করে।

90 তম পার্সেন্টাইল, এই বিশাল সংখ্যার সাথে তুলনা করলে, অন্তত একটু ভালো দেখায়। সমস্ত সাইটের তুলনায়, কৌণিক প্রকল্পগুলি প্রধান থ্রেডে ডেস্কটপ ডিভাইসগুলিতে 29% বেশি সময় এবং মোবাইল ডিভাইসগুলিতে 27% বেশি সময় ব্যয় করে৷ প্রতিক্রিয়া সাইটগুলির ক্ষেত্রে, একই পরিসংখ্যান যথাক্রমে 130% এবং 98% এর মত দেখায়।

90 তম পার্সেন্টাইলের জন্য শতাংশের বিচ্যুতি 10 তম পার্সেন্টাইলের জন্য অনুরূপ মানের চেয়ে ভাল দেখায়। তবে এখানে এটি মনে রাখা উচিত যে সময় নির্দেশকারী সংখ্যাগুলি বরং ভীতিজনক বলে মনে হচ্ছে। চলুন বলি 20.8 সেকেন্ড প্রধান মোবাইল থ্রেডে একটি ওয়েবসাইটের জন্য রিঅ্যাক্ট দিয়ে তৈরি। (আমি মনে করি এই সময়ে আসলে কী ঘটে তার গল্পটি একটি পৃথক নিবন্ধের যোগ্য)।

এখানে একটি সম্ভাব্য জটিলতা রয়েছে (ধন্যবাদ যিরমিয় এই বৈশিষ্ট্যটির প্রতি আমার দৃষ্টি আকর্ষণ করার জন্য এবং এই দৃষ্টিকোণ থেকে ডেটা সাবধানে বিবেচনা করার জন্য)। আসল বিষয়টি হল যে অনেক সাইট বেশ কয়েকটি ফ্রন্ট-এন্ড টুল ব্যবহার করে। বিশেষ করে, আমি রিঅ্যাক্ট বা Vue এর পাশাপাশি jQuery ব্যবহার করে অনেক সাইট দেখেছি, কারণ সেই সাইটগুলো jQuery থেকে অন্য ফ্রেমওয়ার্ক বা লাইব্রেরিতে স্থানান্তরিত হচ্ছে। ফলস্বরূপ, আমি আবার ডাটাবেসে আঘাত করলাম, এইবার শুধুমাত্র সেই লিঙ্কগুলি নির্বাচন করছি যেগুলি শুধুমাত্র প্রতিক্রিয়া, jQuery, কৌণিক, বা 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

যে সাইটগুলো শুধুমাত্র প্রতিক্রিয়া ব্যবহার করে
2443.2
4620.5
10061.4
17074.3
24956.3

মোবাইল ডিভাইসে স্ক্রিপ্ট প্রক্রিয়াকরণের সাথে সম্পর্কিত প্রসেসর সময় এমন একটি পরিস্থিতিতে যেখানে সাইটগুলি শুধুমাত্র একটি ফ্রেমওয়ার্ক বা শুধুমাত্র একটি লাইব্রেরি ব্যবহার করে

প্রথমত, এমন কিছু যা আশ্চর্যজনক নয়: যখন একটি সাইট শুধুমাত্র একটি ফ্রেমওয়ার্ক বা একটি লাইব্রেরি ব্যবহার করে, তখন এই ধরনের সাইটের কার্যকারিতা প্রায়শই উন্নত হয়। প্রতিটি যন্ত্র 10 তম এবং 25 তম পার্সেন্টাইলে ভাল পারফর্ম করে। এটা জ্ঞান করে তোলে. একটি ফ্রেমওয়ার্ক ব্যবহার করে তৈরি করা সাইট দুটি বা ততোধিক ফ্রেমওয়ার্ক বা লাইব্রেরি ব্যবহার করে তৈরি করা সাইটের চেয়ে ভালো পারফর্ম করা উচিত।

প্রকৃতপক্ষে, অধ্যয়ন করা প্রতিটি ফ্রন্ট-এন্ড টুলের কর্মক্ষমতা একটি অদ্ভুত ব্যতিক্রম ছাড়া সব ক্ষেত্রেই ভালো দেখায়। যেটা আমাকে অবাক করেছিল তা হল যে 50 তম পার্সেন্টাইল এবং তার উপরে, রিঅ্যাক্ট ব্যবহার করা সাইটগুলি যখন রিঅ্যাক্টই একমাত্র লাইব্রেরি ব্যবহার করে তখন খারাপ কাজ করে। এই, উপায় দ্বারা, আমি এখানে এই তথ্য উপস্থাপন যে কারণ ছিল.

এটি একটু অদ্ভুত, কিন্তু আমি এখনও এই অদ্ভুততার জন্য একটি ব্যাখ্যা সন্ধান করার চেষ্টা করব।

যদি একটি প্রকল্প প্রতিক্রিয়া এবং jQuery উভয়ই ব্যবহার করে, তবে সেই প্রকল্পটি সম্ভবত jQuery থেকে প্রতিক্রিয়াতে রূপান্তরের অর্ধেক পথের মধ্যে কোথাও রয়েছে। সম্ভবত এটির একটি কোডবেস রয়েছে যেখানে এই লাইব্রেরিগুলি মিশ্রিত হয়। যেহেতু আমরা ইতিমধ্যেই দেখেছি যে jQuery সাইটগুলি প্রতিক্রিয়া সাইটগুলির তুলনায় মূল থ্রেডে কম সময় ব্যয় করে, এটি আমাদের বলতে পারে যে jQuery-এ কিছু কার্যকারিতা প্রয়োগ করা সাইটটিকে আরও ভাল পারফর্ম করতে সহায়তা করে৷

কিন্তু যেহেতু প্রকল্পটি jQuery থেকে 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 সময় ব্যয় করে তার মানে এই নয় যে রিঅ্যাক্ট সাইটগুলি চলার সময় Vue সাইটের তুলনায় বেশি CPU-ই নিবিড়। প্রকৃতপক্ষে, আমরা যে ডেটা পর্যালোচনা করেছি তা ফ্রেমওয়ার্ক এবং লাইব্রেরির কর্মক্ষমতা সম্পর্কে খুব কম বলে। তারা উন্নয়ন পদ্ধতি সম্পর্কে আরও কথা বলে যে, সচেতনভাবে বা না, এই কাঠামো প্রোগ্রামারদের ধাক্কা দিতে পারে। আমরা কাঠামোর জন্য ডকুমেন্টেশন সম্পর্কে কথা বলছি, তাদের ইকোসিস্টেম সম্পর্কে, সাধারণ উন্নয়ন কৌশল সম্পর্কে।

এটি এমন কিছু উল্লেখ করার মতো যা আমরা এখানে বিশ্লেষণ করিনি, যথা, সাইটের পৃষ্ঠাগুলির মধ্যে নেভিগেট করার সময় ডিভাইসটি জাভাস্ক্রিপ্ট কোড কার্যকর করতে কত সময় ব্যয় করে। SPA-এর পক্ষে যুক্তি হল যে একবার একক পৃষ্ঠার অ্যাপ্লিকেশন ব্রাউজারে লোড হয়ে গেলে, ব্যবহারকারী তাত্ত্বিকভাবে সাইটের পৃষ্ঠাগুলি দ্রুত খুলতে সক্ষম হবে। আমার নিজের অভিজ্ঞতা আমাকে বলে যে এটি একটি সত্য থেকে অনেক দূরে। কিন্তু এই সমস্যাটি পরিষ্কার করার জন্য আমাদের কাছে ডেটা নেই।

কি পরিষ্কার যে আপনি যদি একটি ওয়েবসাইট তৈরি করার জন্য একটি ফ্রেমওয়ার্ক বা লাইব্রেরি ব্যবহার করেন তবে আপনি প্রাথমিকভাবে প্রকল্পটি লোড করার এবং এটিকে যাওয়ার জন্য প্রস্তুত করার ক্ষেত্রে একটি আপস করছেন৷ এটি এমনকি সবচেয়ে ইতিবাচক পরিস্থিতিতে প্রযোজ্য।

উপযুক্ত পরিস্থিতিতে কিছু আপস করা সম্পূর্ণভাবে সম্ভব, তবে এটি গুরুত্বপূর্ণ যে বিকাশকারীরা সচেতনভাবে এই ধরনের আপস করে।

কিন্তু আমাদেরও আশাবাদের কারণ আছে। Chrome ডেভেলপাররা কতটা ঘনিষ্ঠভাবে কাজ করছে তা দেখে আমি উচ্ছ্বসিত কিছু ফ্রন্ট-এন্ড টুলগুলির ডেভেলপারদের সাথে কাজ করছে যা আমরা সেই টুলগুলির কার্যকারিতা উন্নত করতে সাহায্য করার প্রয়াসে পর্যালোচনা করেছি৷

যাইহোক, আমি একজন বাস্তববাদী মানুষ। নতুন আর্কিটেকচারগুলি যতবার তাদের সমাধান করে ততবার কর্মক্ষমতা সমস্যা তৈরি করে। এবং বাগ ঠিক করতে সময় লাগে। ঠিক যেমনটা আমাদের আশা করা উচিত নয় নতুন নেটওয়ার্ক প্রযুক্তি সমস্ত কর্মক্ষমতা সমস্যা সমাধান করবে, আপনি আমাদের প্রিয় ফ্রেমওয়ার্কের নতুন সংস্করণ থেকে এটি আশা করা উচিত নয়।

আপনি যদি এই নিবন্ধে আলোচিত ফ্রন্ট-এন্ড টুলগুলির মধ্যে একটি ব্যবহার করতে চান তবে এর অর্থ হল যে ইতিমধ্যে আপনার প্রকল্পের কার্যকারিতাকে ক্ষতিগ্রস্ত না করার জন্য আপনাকে অতিরিক্ত প্রচেষ্টা করতে হবে। একটি নতুন ফ্রেমওয়ার্ক শুরু করার আগে বিবেচনা করার জন্য এখানে কিছু বিবেচ্য বিষয় রয়েছে:

• সাধারণ জ্ঞান দিয়ে নিজেকে পরীক্ষা করুন। আপনি কি সত্যিই নির্বাচিত ফ্রেমওয়ার্ক ব্যবহার করতে হবে? বিশুদ্ধ জাভাস্ক্রিপ্ট আজ অনেক সক্ষম।
• বেছে নেওয়া ফ্রেমওয়ার্কের (যেমন প্রেক্ট, স্ভেল্ট বা অন্য কিছু) এর জন্য কি হালকা বিকল্প আছে যা আপনাকে এই কাঠামোর 90% ক্ষমতা দিতে পারে?
• আপনি যদি ইতিমধ্যে একটি ফ্রেমওয়ার্ক ব্যবহার করছেন, তাহলে বিবেচনা করুন যে এমন কিছু আছে যা আরও ভাল, আরও রক্ষণশীল, মানক বিকল্পগুলি অফার করে (যেমন Vue-এর পরিবর্তে Nuxt.js, প্রতিক্রিয়ার পরিবর্তে Next.js, ইত্যাদি)।
• কি হবে আপনার বাজেট জাভাস্ক্রিপ্ট কর্মক্ষমতা?
• তুমি কিভাবে সীমাবদ্ধ করা একটি উন্নয়ন প্রক্রিয়া এটি একটি প্রকল্পে আরো জাভাস্ক্রিপ্ট কোড ইনজেক্ট করা কঠিন করা একেবারে প্রয়োজনীয়?
• আপনি যদি উন্নয়ন সহজ করার জন্য একটি কাঠামো ব্যবহার করছেন, বিবেচনা করুন তোমার দরকার আছে ক্লায়েন্টদের ফ্রেমওয়ার্ক কোড পাঠান। হয়তো আপনি সার্ভারের সমস্ত সমস্যা সমাধান করতে পারেন?

ফ্রন্ট-এন্ড ডেভেলপমেন্টের জন্য আপনি ঠিক কী বেছে নিয়েছেন তা নির্বিশেষে সাধারণত এই ধারনাগুলি দেখতে মূল্যবান। কিন্তু এগুলি বিশেষভাবে গুরুত্বপূর্ণ যখন আপনি এমন একটি প্রকল্পে কাজ করছেন যেখানে প্রথম থেকেই কর্মক্ষমতা নেই।

প্রিয় পাঠকগণ! আপনি কিভাবে আদর্শ জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক দেখেন?

উত্স: www.habr.com