স্ক্রিপ্টগুলি লোড করার সময়, কার্যকর করার আগে ব্রাউজার তাদের মূল্যায়ন করতে সময় নেয়, যা দীর্ঘ কার্যের কারণ হতে পারে। স্ক্রিপ্ট মূল্যায়ন কিভাবে কাজ করে, এবং পৃষ্ঠা লোডের সময় দীর্ঘ টাস্ক না ঘটাতে আপনি কি করতে পারেন তা জানুন।
যখন নেক্সট পেইন্ট (INP) এর সাথে ইন্টারঅ্যাকশন অপ্টিমাইজ করার কথা আসে, তখন আপনি যে পরামর্শের মুখোমুখি হবেন তার বেশিরভাগই হল মিথস্ক্রিয়াগুলিকে অপ্টিমাইজ করা। উদাহরণ স্বরূপ, অপ্টিমাইজ লং টাস্ক গাইডে , setTimeout সাহায্যে ফলন, isInputPending , এবং আরও কিছু কৌশল নিয়ে আলোচনা করা হয়েছে। এই কৌশলগুলি উপকারী, কারণ তারা দীর্ঘ কাজগুলি এড়িয়ে মূল থ্রেডকে কিছু শ্বাস-প্রশ্বাসের ঘরের অনুমতি দেয়, যা একটি দীর্ঘ কাজের জন্য অপেক্ষা করার পরিবর্তে মিথস্ক্রিয়া এবং অন্যান্য ক্রিয়াকলাপের জন্য আরও বেশি সুযোগ দেয়।
যাইহোক, স্ক্রিপ্টগুলি নিজেরাই লোড করা থেকে আসা দীর্ঘ কাজগুলি সম্পর্কে কী? এই কাজগুলি ব্যবহারকারীর মিথস্ক্রিয়ায় হস্তক্ষেপ করতে পারে এবং লোডের সময় একটি পৃষ্ঠার INP প্রভাবিত করতে পারে। এই গাইডটি এক্সপ্লোর করবে কিভাবে ব্রাউজারগুলি স্ক্রিপ্ট মূল্যায়নের মাধ্যমে শুরু করা কাজগুলি পরিচালনা করে, এবং স্ক্রিপ্ট মূল্যায়নের কাজগুলিকে বিচ্ছিন্ন করার জন্য আপনি কী করতে সক্ষম হতে পারেন তা দেখুন যাতে পৃষ্ঠাটি লোড হওয়ার সময় আপনার প্রধান থ্রেড ব্যবহারকারীর ইনপুটের প্রতি আরও প্রতিক্রিয়াশীল হতে পারে।
স্ক্রিপ্ট মূল্যায়ন কি?
আপনি যদি এমন একটি অ্যাপ্লিকেশন প্রোফাইল করে থাকেন যা প্রচুর জাভাস্ক্রিপ্ট পাঠায়, আপনি হয়ত দীর্ঘ কাজ দেখে থাকবেন যেখানে অপরাধীকে মূল্যায়ন স্ক্রিপ্ট লেবেল করা হয়েছে।
স্ক্রিপ্ট মূল্যায়ন ব্রাউজারে জাভাস্ক্রিপ্ট চালানোর একটি প্রয়োজনীয় অংশ, কারণ জাভাস্ক্রিপ্ট কার্যকর করার আগে ঠিক সময়ে সংকলিত হয়। যখন একটি স্ক্রিপ্ট মূল্যায়ন করা হয়, এটি প্রথমে ত্রুটির জন্য পার্স করা হয়। যদি পার্সার ত্রুটি খুঁজে না পায়, তাহলে স্ক্রিপ্টটি বাইটকোডে কম্পাইল করা হয় এবং তারপরে এক্সিকিউশন চালিয়ে যেতে পারে।
যদিও প্রয়োজনীয়, স্ক্রিপ্ট মূল্যায়ন সমস্যাযুক্ত হতে পারে, কারণ ব্যবহারকারীরা একটি পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার চেষ্টা করতে পারে এটি প্রাথমিকভাবে রেন্ডার হওয়ার পরে। যাইহোক, শুধুমাত্র একটি পৃষ্ঠা রেন্ডার হওয়ার অর্থ এই নয় যে পৃষ্ঠাটি লোড করা শেষ হয়েছে৷ লোডের সময় সংঘটিত ইন্টারঅ্যাকশনগুলি বিলম্বিত হতে পারে কারণ পৃষ্ঠাটি স্ক্রিপ্ট মূল্যায়নে ব্যস্ত। যদিও এই সময়ে কাঙ্খিত মিথস্ক্রিয়াটি ঘটতে পারে এমন কোনো গ্যারান্টি নেই—যেহেতু এটির জন্য দায়ী একটি স্ক্রিপ্ট এখনও লোড নাও হতে পারে-এখানে জাভাস্ক্রিপ্টের উপর নির্ভরশীল মিথস্ক্রিয়া হতে পারে যা প্রস্তুত , অথবা ইন্টারঅ্যাকশন জাভাস্ক্রিপ্টের উপর নির্ভর করে না সব
স্ক্রিপ্ট এবং তাদের মূল্যায়ন করে এমন কাজের মধ্যে সম্পর্ক
স্ক্রিপ্ট মূল্যায়নের জন্য দায়ী কাজগুলি কীভাবে শুরু করা হয় তা নির্ভর করে আপনি যে স্ক্রিপ্টটি লোড করছেন সেটি একটি নিয়মিত <script> উপাদানের মাধ্যমে লোড হয়েছে কিনা, অথবা যদি একটি স্ক্রিপ্টটি type=module দিয়ে লোড করা একটি মডিউল হয়। যেহেতু ব্রাউজারগুলিতে জিনিসগুলিকে ভিন্নভাবে পরিচালনা করার প্রবণতা রয়েছে, তাই প্রধান ব্রাউজার ইঞ্জিনগুলি কীভাবে স্ক্রিপ্ট মূল্যায়ন পরিচালনা করে যেখানে তাদের জুড়ে স্ক্রিপ্ট মূল্যায়নের আচরণগুলি পরিবর্তিত হয় তার উপর স্পর্শ করা হবে।
<script> উপাদান সহ স্ক্রিপ্ট লোড করা হচ্ছে
স্ক্রিপ্ট মূল্যায়ন করার জন্য পাঠানো কাজের সংখ্যার সাধারণত একটি পৃষ্ঠায় <script> উপাদানের সংখ্যার সাথে সরাসরি সম্পর্ক থাকে। প্রতিটি <script> উপাদান অনুরোধ করা স্ক্রিপ্ট মূল্যায়ন করার জন্য একটি কাজ শুরু করে যাতে এটি পার্স করা, কম্পাইল করা এবং কার্যকর করা যায়। এটি ক্রোমিয়াম-ভিত্তিক ব্রাউজার, সাফারি এবং ফায়ারফক্সের ক্ষেত্রে।
কেন এই ব্যাপার? ধরা যাক আপনি আপনার প্রোডাকশন স্ক্রিপ্টগুলি পরিচালনা করতে একটি বান্ডলার ব্যবহার করছেন এবং আপনার পৃষ্ঠাটিকে একটি একক স্ক্রিপ্টে চালানোর জন্য প্রয়োজনীয় সমস্ত কিছু বান্ডেল করার জন্য আপনি এটি কনফিগার করেছেন৷ যদি এটি আপনার ওয়েবসাইটের ক্ষেত্রে হয়, আপনি আশা করতে পারেন যে সেই স্ক্রিপ্টটি মূল্যায়ন করার জন্য একটি একক কাজ পাঠানো হবে। এটা কি একটা খারাপ জিনিস? অগত্যা-যদি না সেই স্ক্রিপ্টটি বিশাল হয়।
আপনি জাভাস্ক্রিপ্টের বড় অংশ লোড করা এড়িয়ে স্ক্রিপ্ট মূল্যায়নের কাজটি ভেঙে ফেলতে পারেন এবং অতিরিক্ত <script> উপাদান ব্যবহার করে আরও পৃথক, ছোট স্ক্রিপ্ট লোড করতে পারেন।
পৃষ্ঠা লোড করার সময় আপনার যতটা সম্ভব কম জাভাস্ক্রিপ্ট লোড করার চেষ্টা করা উচিত, আপনার স্ক্রিপ্টগুলিকে বিভক্ত করা নিশ্চিত করে যে, একটি বড় টাস্ক যা মূল থ্রেডকে ব্লক করতে পারে তার পরিবর্তে, আপনার কাছে আরও বেশি সংখ্যক ছোট কাজ রয়েছে যা প্রধানটিকে ব্লক করবে না থ্রেড মোটেই—অথবা অন্তত আপনি যা দিয়ে শুরু করেছেন তার চেয়ে কম।
<script> উপাদানের ফলে স্ক্রিপ্ট মূল্যায়ন করার জন্য একাধিক কাজ তৈরি হয়েছে। এটি ব্যবহারকারীদের কাছে একটি বড় স্ক্রিপ্ট বান্ডিল পাঠানোর চেয়ে ভাল, যা প্রধান থ্রেডটিকে ব্লক করার সম্ভাবনা বেশি।আপনি স্ক্রিপ্ট মূল্যায়নের জন্য কাজগুলিকে বিচ্ছিন্ন করার কথা ভাবতে পারেন যেটি একটি ইন্টারঅ্যাকশন চলাকালীন ইভেন্ট কলব্যাকের সময় ফলন দেওয়ার মতো। যাইহোক, স্ক্রিপ্ট মূল্যায়নের সাথে, ফলন পদ্ধতি আপনার লোড করা জাভাস্ক্রিপ্টটিকে একাধিক ছোট স্ক্রিপ্টে বিভক্ত করে, প্রধান থ্রেডটিকে ব্লক করার সম্ভাবনার চেয়ে কম সংখ্যক বড় স্ক্রিপ্টের পরিবর্তে।
<script> উপাদান এবং type=module বৈশিষ্ট্য সহ স্ক্রিপ্ট লোড করা হচ্ছে
<script> এলিমেন্টে type=module অ্যাট্রিবিউট দিয়ে ব্রাউজারে নেটিভলি ES মডিউল লোড করা এখন সম্ভব। স্ক্রিপ্ট লোড করার এই পদ্ধতিটি কিছু বিকাশকারীর অভিজ্ঞতার সুবিধা বহন করে, যেমন উত্পাদন ব্যবহারের জন্য কোড রূপান্তর করতে হবে না—বিশেষ করে যখন আমদানি মানচিত্রের সাথে একত্রে ব্যবহার করা হয়। যাইহোক, এইভাবে স্ক্রিপ্ট লোড করা কাজগুলিকে সময়সূচী করে যা ব্রাউজার থেকে ব্রাউজারে আলাদা।
ক্রোমিয়াম-ভিত্তিক ব্রাউজার
Chrome-এর মতো ব্রাউজারে—বা এটি থেকে উদ্ভূত— type=module অ্যাট্রিবিউট ব্যবহার করে ইএস মডিউল লোড করার ফলে আপনি সাধারণত type=module ব্যবহার না করার সময় দেখতে পাওয়ার চেয়ে বিভিন্ন ধরণের কাজ তৈরি করে। উদাহরণস্বরূপ, প্রতিটি মডিউল স্ক্রিপ্টের জন্য একটি টাস্ক চালানো হবে যাতে কম্পাইল মডিউল হিসাবে লেবেল করা কার্যকলাপ জড়িত থাকে।
একবার মডিউলগুলি কম্পাইল হয়ে গেলে, যেকোন কোড যা পরবর্তীতে তাদের মধ্যে চলে তা মূল্যায়ন মডিউল হিসাবে লেবেলযুক্ত কার্যকলাপ শুরু করবে।
ক্রোম এবং সম্পর্কিত ব্রাউজারগুলিতে এখানে প্রভাবটি হল, ES মডিউলগুলি ব্যবহার করার সময় সংকলন পদক্ষেপগুলি ভেঙে দেওয়া হয়। দীর্ঘ কাজ পরিচালনার ক্ষেত্রে এটি একটি স্পষ্ট জয়; যাইহোক, ফলাফল মডিউল মূল্যায়ন কাজ যে ফলাফল এখনও মানে আপনি কিছু অনিবার্য খরচ বহন করছেন. আপনার যতটা সম্ভব কম জাভাস্ক্রিপ্ট পাঠানোর চেষ্টা করা উচিত, ES মডিউল ব্যবহার করা - ব্রাউজার নির্বিশেষে - নিম্নলিখিত সুবিধাগুলি প্রদান করে:
- সমস্ত মডিউল কোড স্বয়ংক্রিয়ভাবে কঠোর মোডে চালিত হয়, যা জাভাস্ক্রিপ্ট ইঞ্জিনগুলির দ্বারা সম্ভাব্য অপ্টিমাইজেশনের অনুমতি দেয় যা অন্যথায় একটি অ-কঠোর প্রসঙ্গে তৈরি করা যায় না।
-
type=moduleব্যবহার করে লোড করা স্ক্রিপ্টগুলিকে এমনভাবে ধরা হয় যেন সেগুলি ডিফল্টরূপে স্থগিত করা হয়েছে। এই আচরণ পরিবর্তন করতেtype=moduleসহ লোড করা স্ক্রিপ্টগুলিতেasyncবৈশিষ্ট্য ব্যবহার করা সম্ভব।
সাফারি এবং ফায়ারফক্স
যখন সাফারি এবং ফায়ারফক্সে মডিউলগুলি লোড করা হয়, তখন তাদের প্রতিটিকে একটি পৃথক টাস্কে মূল্যায়ন করা হয়। এর মানে হল আপনি তাত্ত্বিকভাবে অন্যান্য মডিউলগুলিতে শুধুমাত্র স্ট্যাটিক import স্টেটমেন্ট সমন্বিত একটি একক শীর্ষ-স্তরের মডিউল লোড করতে পারেন এবং লোড হওয়া প্রতিটি মডিউলের জন্য এটি মূল্যায়ন করার জন্য একটি পৃথক নেটওয়ার্ক অনুরোধ এবং টাস্ক বহন করতে হবে।
গতিশীল import() সহ স্ক্রিপ্ট লোড হচ্ছে
ডায়নামিক import() স্ক্রিপ্ট লোড করার আরেকটি পদ্ধতি। একটি ES মডিউলের শীর্ষে থাকা স্ট্যাটিক import স্টেটমেন্টের বিপরীতে, চাহিদা অনুযায়ী জাভাস্ক্রিপ্টের একটি অংশ লোড করার জন্য একটি ডায়নামিক import() কল স্ক্রিপ্টের যে কোনও জায়গায় উপস্থিত হতে পারে। এই কৌশলটিকে কোড স্প্লিটিং বলা হয়।
INP উন্নত করার ক্ষেত্রে ডায়নামিক import() এর দুটি সুবিধা রয়েছে:
- যে মডিউলগুলি পরে লোড হতে স্থগিত করা হয় সেগুলি সেই সময়ে লোড হওয়া জাভাস্ক্রিপ্টের পরিমাণ কমিয়ে স্টার্টআপের সময় মূল থ্রেডের বিতর্ক কমায়৷ এটি মূল থ্রেডকে মুক্ত করে যাতে এটি ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য আরও প্রতিক্রিয়াশীল হতে পারে।
- যখন ডায়নামিক
import()কল করা হয়, প্রতিটি কল কার্যকরভাবে প্রতিটি মডিউলের সংকলন এবং মূল্যায়নকে তার নিজস্ব কাজে আলাদা করবে। অবশ্যই, একটি ডায়নামিকimport()যা একটি খুব বড় মডিউল লোড করে একটি বরং বড় স্ক্রিপ্ট মূল্যায়নের কাজ শুরু করবে এবং এটি ব্যবহারকারীর ইনপুটের প্রতিক্রিয়া জানাতে প্রধান থ্রেডের ক্ষমতাতে হস্তক্ষেপ করতে পারে যদি মিথস্ক্রিয়া একই সময়ে ঘটে গতিশীলimport()কল। অতএব, এটি এখনও খুব গুরুত্বপূর্ণ যে আপনি যতটা সম্ভব কম জাভাস্ক্রিপ্ট লোড করুন৷
ডায়নামিক import() কলগুলি সমস্ত প্রধান ব্রাউজার ইঞ্জিনে একই রকম আচরণ করে: স্ক্রিপ্ট মূল্যায়নের কাজগুলি যেগুলির ফলস্বরূপ গতিশীলভাবে আমদানি করা মডিউলগুলির পরিমাণের সমান হবে৷
ওয়েব ওয়ার্কারে স্ক্রিপ্ট লোড করা হচ্ছে
ওয়েব কর্মীরা একটি বিশেষ জাভাস্ক্রিপ্ট ব্যবহারের ক্ষেত্রে। ওয়েব কর্মীদের মূল থ্রেডে নিবন্ধিত করা হয়, এবং কর্মীদের মধ্যে কোডটি তার নিজস্ব থ্রেডে চলে। এই অর্থে এটি অত্যন্ত উপকারী যে-যদিও যে কোডটি ওয়েব কর্মীকে নিবন্ধন করে সেটি মূল থ্রেডে চলে-ওয়েব কর্মীর মধ্যে কোডটি চলে না। এটি মূল থ্রেডের ভিড় কমায় এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য মূল থ্রেডটিকে আরও প্রতিক্রিয়াশীল রাখতে সাহায্য করতে পারে।
মূল থ্রেডের কাজ কমানোর পাশাপাশি, ওয়েব কর্মীরা নিজেরাই কর্মী প্রসঙ্গে ব্যবহার করার জন্য বহিরাগত স্ক্রিপ্ট লোড করতে পারে, হয় importScripts বা ব্রাউজারে স্ট্যাটিক import স্টেটমেন্টের মাধ্যমে যা মডিউল কর্মীদের সমর্থন করে। ফলাফল হল যে কোনও ওয়েব কর্মী দ্বারা অনুরোধ করা কোনও স্ক্রিপ্ট মূল থ্রেড থেকে মূল্যায়ন করা হয়।
বাণিজ্য বন্ধ এবং বিবেচনা
আপনার স্ক্রিপ্টগুলিকে আলাদা করে ভাগ করার সময়, ছোট ফাইলগুলি কম, অনেক বড় ফাইল লোড করার বিপরীতে দীর্ঘ কাজগুলিকে সীমিত করতে সহায়তা করে, স্ক্রিপ্টগুলি কীভাবে ভাঙতে হবে তা সিদ্ধান্ত নেওয়ার সময় কিছু জিনিস বিবেচনা করা গুরুত্বপূর্ণ।
কম্প্রেশন দক্ষতা
কম্প্রেশন একটি ফ্যাক্টর যখন এটি স্ক্রিপ্ট বিচ্ছেদ আসে. যখন স্ক্রিপ্টগুলি ছোট হয়, তখন কম্প্রেশন কিছুটা কম কার্যকর হয়। বড় স্ক্রিপ্ট কম্প্রেশন থেকে অনেক বেশি উপকৃত হবে। যদিও কম্প্রেশন দক্ষতা বৃদ্ধি স্ক্রিপ্টগুলির জন্য লোডের সময় যতটা সম্ভব কম রাখতে সাহায্য করে, এটি একটি ভারসাম্যমূলক কাজ যে আপনি স্ক্রিপ্টগুলিকে পর্যাপ্ত ছোট অংশে বিভক্ত করছেন তা নিশ্চিত করার জন্য স্টার্টআপের সময় আরও ভাল ইন্টারঅ্যাক্টিভিটি সুবিধার জন্য।
আপনার ওয়েবসাইট যে স্ক্রিপ্টগুলির উপর নির্ভর করে তার আউটপুট আকার পরিচালনা করার জন্য বান্ডলারগুলি হল আদর্শ সরঞ্জাম:
- যেখানে ওয়েবপ্যাক উদ্বিগ্ন, তার
SplitChunksPluginপ্লাগইন সাহায্য করতে পারে। সম্পদের আকার পরিচালনা করতে আপনি যে বিকল্পগুলি সেট করতে পারেন তার জন্যSplitChunksPluginডকুমেন্টেশনের সাথে পরামর্শ করুন৷ - Rollup এবং esbuild এর মতো অন্যান্য বান্ডলারের জন্য, আপনি আপনার কোডে ডায়নামিক
import()কল ব্যবহার করে স্ক্রিপ্ট ফাইলের আকার পরিচালনা করতে পারেন। এই বান্ডলারগুলি — সেইসাথে ওয়েবপ্যাক — স্বয়ংক্রিয়ভাবে গতিশীলভাবে আমদানি করা সম্পদকে তার নিজস্ব ফাইলে ভেঙে ফেলবে, এইভাবে বড় প্রাথমিক বান্ডেল আকারগুলি এড়িয়ে যাবে৷
ক্যাশে অবৈধতা
বারবার ভিজিট করার সময় একটি পৃষ্ঠা কত দ্রুত লোড হয় তার ক্ষেত্রে ক্যাশে অকার্যকরকরণ একটি বড় ভূমিকা পালন করে। আপনি যখন বড়, একচেটিয়া স্ক্রিপ্ট বান্ডিল পাঠান, তখন ব্রাউজার ক্যাশিংয়ের ক্ষেত্রে আপনি একটি অসুবিধায় পড়েন। এর কারণ হল আপনি যখন আপনার প্রথম পক্ষের কোড আপডেট করেন — হয় প্যাকেজ আপডেট করার মাধ্যমে বা শিপিং বাগ ফিক্সের মাধ্যমে — পুরো বান্ডিলটি অবৈধ হয়ে যায় এবং আবার ডাউনলোড করতে হবে৷
আপনার স্ক্রিপ্টগুলি ভাঙার মাধ্যমে, আপনি কেবল ছোট ছোট কাজ জুড়ে স্ক্রিপ্ট মূল্যায়নের কাজকে ভেঙে দিচ্ছেন না, আপনি সম্ভাবনাও বাড়িয়ে দিচ্ছেন যে ফেরত দর্শকরা নেটওয়ার্কের পরিবর্তে ব্রাউজার ক্যাশে থেকে আরও স্ক্রিপ্টগুলি দখল করবে৷ এটি একটি সামগ্রিক দ্রুত পৃষ্ঠা লোডে অনুবাদ করে৷
নেস্টেড মডিউল এবং লোডিং কর্মক্ষমতা
আপনি যদি উৎপাদনে ES মডিউল শিপিং করেন এবং type=module অ্যাট্রিবিউট দিয়ে লোড করেন, তাহলে মডিউল নেস্টিং কীভাবে শুরুর সময়কে প্রভাবিত করতে পারে সে সম্পর্কে আপনাকে সচেতন হতে হবে। মডিউল নেস্টিং বলতে বোঝায় যখন একটি ES মডিউল স্থিতিশীলভাবে অন্য ES মডিউল আমদানি করে যা স্ট্যাটিকভাবে অন্য ES মডিউল আমদানি করে:
// a.js
import {b} from './b.js';
// b.js
import {c} from './c.js';
যদি আপনার ES মডিউলগুলি একসাথে বান্ডিল না করা হয়, তাহলে পূর্ববর্তী কোডটি একটি নেটওয়ার্ক অনুরোধের শৃঙ্খলে পরিণত হয়: যখন একটি <script> উপাদান থেকে a.js অনুরোধ করা হয়, তখন b.js এর জন্য অন্য একটি নেটওয়ার্ক অনুরোধ পাঠানো হয়, যার পরে c-এর জন্য আরেকটি অনুরোধ অন্তর্ভুক্ত থাকে c.js এটি এড়ানোর একটি উপায় হল একটি বান্ডলার ব্যবহার করা—কিন্তু আপনি স্ক্রিপ্ট মূল্যায়নের কাজটি ছড়িয়ে দেওয়ার জন্য স্ক্রিপ্টগুলি ভাঙতে আপনার বান্ডলারকে কনফিগার করছেন তা নিশ্চিত করুন।
আপনি যদি একটি বান্ডলার ব্যবহার করতে না চান, তাহলে নেস্টেড মডিউল কলগুলির কাছাকাছি যাওয়ার আরেকটি উপায় হল modulepreload রিসোর্স হিন্ট ব্যবহার করা, যা নেটওয়ার্ক অনুরোধের চেইন এড়াতে সময়ের আগে ES মডিউলগুলিকে প্রিলোড করবে।
উপসংহার
ব্রাউজারে স্ক্রিপ্টগুলির মূল্যায়ন অপ্টিমাইজ করা নিঃসন্দেহে একটি জটিল কৃতিত্ব। পদ্ধতিটি আপনার ওয়েবসাইটের প্রয়োজনীয়তা এবং সীমাবদ্ধতার উপর নির্ভর করে। যাইহোক, স্ক্রিপ্টগুলিকে বিভক্ত করে, আপনি স্ক্রিপ্ট মূল্যায়নের কাজটি অসংখ্য ছোট ছোট কাজের উপর ছড়িয়ে দিচ্ছেন এবং তাই মূল থ্রেডটিকে ব্লক করার পরিবর্তে ব্যবহারকারীর মিথস্ক্রিয়াগুলিকে আরও দক্ষতার সাথে পরিচালনা করার ক্ষমতা প্রদান করছেন।
রিক্যাপ করার জন্য, এখানে কিছু জিনিস রয়েছে যা আপনি বড় স্ক্রিপ্ট মূল্যায়নের কাজগুলি ভেঙে দিতে পারেন:
-
type=moduleঅ্যাট্রিবিউট ছাড়া<script>উপাদান ব্যবহার করে স্ক্রিপ্ট লোড করার সময়, খুব বড় স্ক্রিপ্টগুলি লোড করা এড়িয়ে চলুন, কারণ এটি মূল থ্রেডকে ব্লক করে এমন রিসোর্স-ইনটেনসিভ স্ক্রিপ্ট মূল্যায়ন কাজ বন্ধ করে দেবে। এই কাজটি ভাঙতে আপনার স্ক্রিপ্টগুলিকে আরও<script>উপাদানগুলিতে ছড়িয়ে দিন। - ব্রাউজারে স্থানীয়ভাবে ES মডিউলগুলি লোড করতে
type=moduleবৈশিষ্ট্যটি ব্যবহার করলে প্রতিটি পৃথক মডিউল স্ক্রিপ্টের মূল্যায়নের জন্য পৃথক কাজ শুরু হবে। - ডায়নামিক
import()কল ব্যবহার করে আপনার প্রাথমিক বান্ডেলের আকার কমিয়ে দিন। এটি বান্ডলারগুলিতেও কাজ করে, কারণ বান্ডলাররা প্রতিটি গতিশীলভাবে আমদানি করা মডিউলকে "বিভক্ত পয়েন্ট" হিসাবে বিবেচনা করবে, যার ফলে প্রতিটি গতিশীলভাবে আমদানি করা মডিউলের জন্য একটি পৃথক স্ক্রিপ্ট তৈরি করা হবে। - কম্প্রেশন দক্ষতা এবং ক্যাশে অবৈধকরণের মতো ট্রেড-অফগুলি ওজন করতে ভুলবেন না। বৃহত্তর স্ক্রিপ্টগুলি আরও ভালভাবে সংকুচিত করবে, তবে কম কাজে বেশি ব্যয়বহুল স্ক্রিপ্ট মূল্যায়নের কাজ জড়িত হওয়ার সম্ভাবনা বেশি, এবং ফলস্বরূপ ব্রাউজার ক্যাশে অবৈধ হয়ে যায়, যা সামগ্রিকভাবে কম ক্যাশিং দক্ষতার দিকে পরিচালিত করে।
- যদি ES মডিউলগুলিকে বান্ডলিং ছাড়াই স্থানীয়ভাবে ব্যবহার করা হয়, তাহলে স্টার্টআপের সময় তাদের লোডিং অপ্টিমাইজ করতে
modulepreloadরিসোর্স ইঙ্গিতটি ব্যবহার করুন। - বরাবরের মতো, যতটা সম্ভব কম জাভাস্ক্রিপ্ট পাঠান।
এটি নিশ্চিতভাবে একটি ভারসাম্যমূলক কাজ—কিন্তু স্ক্রিপ্টগুলিকে বিচ্ছিন্ন করে এবং ডায়নামিক import() মাধ্যমে প্রাথমিক পেলোডগুলি হ্রাস করে, আপনি আরও ভাল স্টার্টআপ কার্যক্ষমতা অর্জন করতে পারেন এবং সেই গুরুত্বপূর্ণ স্টার্টআপ সময়কালে ব্যবহারকারীর ইন্টারঅ্যাকশনগুলিকে আরও ভালভাবে সামঞ্জস্য করতে পারেন৷ এটি আপনাকে INP মেট্রিকে আরও ভাল স্কোর করতে সাহায্য করবে, এইভাবে একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করবে।
আনস্প্ল্যাশ থেকে হিরো ইমেজ, মার্কাস স্পিসকে ।