জাভাস্ক্রিপ্ট প্রায়শই ভিজ্যুয়াল পরিবর্তনের কারণ হয়ে থাকে। কখনও কখনও এটি সরাসরি স্টাইল ম্যানিপুলেশনের মাধ্যমে সেই পরিবর্তনগুলো ঘটায়, এবং কখনও ডেটা সার্চ বা সর্ট করার মতো গণনার মাধ্যমে ভিজ্যুয়াল পরিবর্তন ঘটায়। ভুল সময়ে বা দীর্ঘ সময় ধরে চলা জাভাস্ক্রিপ্ট পারফরম্যান্স সমস্যার একটি সাধারণ কারণ হতে পারে, এবং যেখানে সম্ভব আপনার এর প্রভাব কমানোর চেষ্টা করা উচিত।
শৈলী গণনা
এলিমেন্ট যোগ করা ও অপসারণ করা, অ্যাট্রিবিউট ও ক্লাস পরিবর্তন করা, বা অ্যানিমেশন চালানোর মাধ্যমে DOM পরিবর্তন করলে ব্রাউজার এলিমেন্টের স্টাইল এবং অনেক ক্ষেত্রে পেজের অংশবিশেষ বা সম্পূর্ণ পেজের লেআউট পুনরায় গণনা করে। এই প্রক্রিয়াটিকে স্টাইল ক্যালকুলেশন বলা হয়।
ব্রাউজার কোনো নির্দিষ্ট এলিমেন্টের জন্য কোন ক্লাস, সিউডো-সিলেক্টর এবং আইডি প্রযোজ্য হবে তা নির্ধারণ করতে এক সেট সামঞ্জস্যপূর্ণ সিলেক্টর তৈরি করার মাধ্যমে স্টাইল গণনা শুরু করে। এরপর, এটি সেই সামঞ্জস্যপূর্ণ সিলেক্টরগুলো থেকে স্টাইলের নিয়মগুলো বিশ্লেষণ করে এবং এলিমেন্টটির চূড়ান্ত স্টাইল কী হবে তা বের করে।
মিথস্ক্রিয়ার বিলম্বের ক্ষেত্রে শৈলী পুনঃগণনার ভূমিকা
ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) হলো একটি ব্যবহারকারী-কেন্দ্রিক রানটাইম পারফরম্যান্স মেট্রিক যা ব্যবহারকারীর ইনপুটের প্রতি একটি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়াশীলতা মূল্যায়ন করে। এটি ব্যবহারকারীর পৃষ্ঠাটির সাথে ইন্টারঅ্যাকশন করার মুহূর্ত থেকে শুরু করে ব্রাউজার কর্তৃক ইউজার ইন্টারফেসে সংশ্লিষ্ট ভিজ্যুয়াল আপডেট প্রদর্শনকারী পরবর্তী ফ্রেমটি আঁকা পর্যন্ত ইন্টারঅ্যাকশন লেটেন্সি পরিমাপ করে।
একটি ইন্টারঅ্যাকশনের একটি গুরুত্বপূর্ণ উপাদান হলো পরবর্তী ফ্রেমটি আঁকতে যে সময় লাগে। পরবর্তী ফ্রেমটি উপস্থাপন করার জন্য করা রেন্ডারিং কাজটি অনেকগুলো অংশ নিয়ে গঠিত, যার মধ্যে রয়েছে লেআউট, পেইন্ট এবং কম্পোজিটিং কাজের ঠিক আগে পেজ স্টাইলের গণনা। এই নির্দেশিকাটি স্টাইল গণনার খরচের উপর আলোকপাত করে, কিন্তু ইন্টারঅ্যাকশনের মোট রেন্ডারিং সময়কালের যেকোনো অংশ কমালে এর মোট ল্যাটেন্সিও কমে যায়।
আপনার সিলেক্টরগুলির জটিলতা হ্রাস করুন
CSS সিলেক্টর সরল করলে আপনার পেজের স্টাইল গণনার গতি বাড়াতে সাহায্য করতে পারে। সবচেয়ে সহজ সিলেক্টরগুলো CSS-এ শুধুমাত্র একটি ক্লাস নেম দিয়ে কোনো এলিমেন্টকে নির্দেশ করে:
.title {
/* styles */
}
কিন্তু, যেকোনো প্রজেক্ট বড় হওয়ার সাথে সাথে সম্ভবত আরও জটিল CSS-এর প্রয়োজন হয়, এবং এর ফলে আপনার সিলেক্টরগুলো দেখতে এইরকম হতে পারে:
.box:nth-last-child(-n+1) .title {
/* styles */
}
এই স্টাইলগুলো পেজে কীভাবে প্রয়োগ হবে তা নির্ধারণ করতে, ব্রাউজারকে কার্যকরভাবে জিজ্ঞাসা করতে হয়, "এটি কি ' title ক্লাসের এমন একটি এলিমেন্ট, যার প্যারেন্টের ক্লাস ' box এবং যা আবার তার প্যারেন্ট এলিমেন্টের মাইনাস-এনথ-প্লাস-১ চাইল্ড?" এটি বের করতে ব্রাউজারের কিছুটা সময় লাগতে পারে। এটিকে সহজ করার জন্য, আপনি সিলেক্টরটিকে আরও সুনির্দিষ্ট একটি ক্লাস নেম দিয়ে পরিবর্তন করতে পারেন:
.final-box-title {
/* styles */
}
এই প্রতিস্থাপিত ক্লাস নেমগুলো অদ্ভুত লাগতে পারে, কিন্তু এগুলো ব্রাউজারের কাজকে অনেক সহজ করে দেয়। উদাহরণস্বরূপ, আগের সংস্করণে, কোনো একটি এলিমেন্ট তার ধরনের শেষ এলিমেন্ট কিনা তা ব্রাউজারকে জানতে হলে, তাকে প্রথমে অন্য সব এলিমেন্ট সম্পর্কে সবকিছু জানতে হতো, যাতে সে নির্ধারণ করতে পারে যে এর পরে আসা কোনো এলিমেন্ট nth-last-child হতে পারে কিনা। শুধুমাত্র ক্লাস নেমের ভিত্তিতে কোনো এলিমেন্টের সাথে একটি সিলেক্টর মেলানোর চেয়ে এই পদ্ধতিটি গণনাগতভাবে অনেক বেশি ব্যয়বহুল হতে পারে।
স্টাইল করা উপাদানের সংখ্যা হ্রাস করুন
পারফরম্যান্স সংক্রান্ত আরেকটি বিবেচ্য বিষয়—এবং প্রায়শই সিলেক্টরের জটিলতার চেয়েও বেশি গুরুত্বপূর্ণ—হলো কোনো এলিমেন্ট পরিবর্তিত হলে কী পরিমাণ কাজ করতে হয়।
সাধারণভাবে বলতে গেলে, কম্পিউটেড এলিমেন্টের স্টাইল গণনা করার সবচেয়ে খারাপ ক্ষেত্রের খরচ হলো এলিমেন্টের সংখ্যাকে সিলেক্টরের সংখ্যা দিয়ে গুণ করার সমান, কারণ ব্রাউজারকে প্রতিটি স্টাইলের সাথে মিলছে কিনা তা দেখার জন্য প্রত্যেক এলিমেন্টকে অন্তত একবার যাচাই করতে হয়।
স্টাইল ক্যালকুলেশন পুরো পেজটিকে বাতিল না করে সরাসরি কয়েকটি এলিমেন্টকে টার্গেট করতে পারে। আধুনিক ব্রাউজারগুলোতে এটি তেমন কোনো সমস্যা তৈরি করে না, কারণ কোনো পরিবর্তনে প্রভাবিত হতে পারে এমন সব এলিমেন্টকে ব্রাউজারকে সবসময় পরীক্ষা করার প্রয়োজন হয় না। অন্যদিকে, পুরোনো ব্রাউজারগুলো এই ধরনের কাজের জন্য সবসময় অপ্টিমাইজ করা থাকে না। যেখানে সম্ভব, বাতিল করা এলিমেন্টের সংখ্যা কমিয়ে আনা উচিত।
আপনার স্টাইল পুনর্গণনার খরচ পরিমাপ করুন
ব্রাউজারে স্টাইল পুনঃগণনার খরচ পরিমাপ করার কয়েকটি উপায় আছে। এগুলোর প্রত্যেকটি নির্ভর করে আপনি এটি আপনার ডেভেলপমেন্ট এনভায়রনমেন্টে ব্রাউজারে পরিমাপ করতে চান, নাকি আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য এই প্রক্রিয়াটি সম্পন্ন হতে কত সময় লাগে তা পরিমাপ করতে চান, তার উপর।
ক্রোম ডেভটুলস-এ স্টাইল পুনঃগণনার খরচ পরিমাপ করুন
স্টাইল পুনঃগণনার খরচ পরিমাপ করার একটি উপায় হলো Chrome DevTools-এর পারফরম্যান্স প্যানেল ব্যবহার করা। শুরু করার জন্য নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করুন:
- ডেভটুলস খুলুন।
- পারফরম্যান্স ট্যাবে যান।
- সিলেক্টর স্ট্যাটস চেকবক্সটি চেক করুন (ঐচ্ছিক)।
- রেকর্ড-এ ক্লিক করুন।
- পৃষ্ঠাটির সাথে মিথস্ক্রিয়া করুন।
যখন আপনি রেকর্ডিং বন্ধ করবেন, তখন নিচের ছবির মতো কিছু দেখতে পাবেন:
উপরের স্ট্রিপটি একটি ক্ষুদ্র ফ্লেম চার্ট, যা প্রতি সেকেন্ডে ফ্রেমের সংখ্যাও দেখায়। অ্যাক্টিভিটিটি স্ট্রিপের নিচের দিকে যত কাছাকাছি থাকে, ব্রাউজার তত দ্রুত ফ্রেমগুলো প্রদর্শন করে। যদি আপনি দেখেন যে ফ্লেম চার্টটি উপরে সমতল হয়ে গেছে এবং তার উপরে লাল বার দেখা যাচ্ছে, তাহলে আপনার এমন একটি কাজ আছে যা দীর্ঘ সময় ধরে ফ্রেম চলার কারণ হচ্ছে।
স্ক্রোল করার মতো কোনো ইন্টারঅ্যাকশনের সময় দীর্ঘক্ষণ ধরে চলা ফ্রেমগুলো আরও ভালোভাবে খতিয়ে দেখা উচিত। যদি আপনি একটি বড় বেগুনি ব্লক দেখতে পান, তাহলে অ্যাক্টিভিটিটিতে জুম ইন করুন এবং সম্ভাব্য ব্যয়বহুল স্টাইল পুনঃগণনার কাজ সম্পর্কে আরও তথ্য পেতে 'Recalculate Style' লেবেলযুক্ত যেকোনো কাজ নির্বাচন করুন।
ইভেন্টটিতে ক্লিক করলে এর কল স্ট্যাক দেখা যায়। যদি রেন্ডারিংয়ের কাজটি ব্যবহারকারীর কোনো ইন্টারঅ্যাকশনের কারণে হয়ে থাকে, তবে এটি সেই জাভাস্ক্রিপ্ট কোডটিকে কল করে যা স্টাইল পরিবর্তনটি ঘটিয়েছে। এটি আরও দেখায় যে পরিবর্তনটি কতগুলো এলিমেন্টকে প্রভাবিত করেছে—এই ক্ষেত্রে ৯০০-এর কিছু বেশি এলিমেন্ট—এবং স্টাইল ক্যালকুলেশন করতে কত সময় লেগেছে। আপনার কোডে একটি সমাধান খোঁজার চেষ্টা শুরু করতে আপনি এই তথ্য ব্যবহার করতে পারেন।
ট্রেস করার আগে যদি আপনি পারফরম্যান্স প্যানেল সেটিংসে ‘সিলেক্টর স্ট্যাটস’ চেকবক্সটি চেক করে থাকেন, তাহলে ট্রেসের নিচের প্যানেলে একই নামের একটি অতিরিক্ত ট্যাব থাকবে।
এই প্যানেলটি প্রতিটি সিলেক্টরের আপেক্ষিক খরচ সম্পর্কে দরকারি তথ্য প্রদান করে, যার ফলে আপনি ব্যয়বহুল CSS সিলেক্টরগুলো শনাক্ত করতে পারেন।
আরও তথ্যের জন্য, CSS সিলেক্টর স্ট্যাটস ডকুমেন্টেশন দেখুন।
প্রকৃত ব্যবহারকারীদের জন্য পরিমাপ শৈলীর পুনঃগণনার খরচ
আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য স্টাইল পুনঃগণনা হতে কতক্ষণ সময় লাগে, তা জানতে যদি আপনি আগ্রহী হন, তবে লং অ্যানিমেশন ফ্রেমস এপিআই (Long Animation Frames API) আপনাকে সেই প্রয়োজনীয় টুলস সরবরাহ করে। এই এপিআই থেকে প্রাপ্ত ডেটা, স্টাইল পুনঃগণনার সময় সহ, web-vitals জাভাস্ক্রিপ্ট লাইব্রেরিতে যুক্ত করা হয়েছে।
যদি আপনার সন্দেহ হয় যে কোনো ইন্টারঅ্যাকশনের প্রেজেন্টেশন ডিলে-ই একটি পেজের INP-এর প্রধান কারণ, তাহলে আপনাকে বের করতে হবে যে সেই সময়ের কতটা অংশ পেজটির স্টাইল পুনঃগণনা করতে ব্যয় হয়। আরও তথ্যের জন্য, ফিল্ডে কীভাবে স্টাইল পুনঃগণনার সময় পরিমাপ করতে হয় সে সম্পর্কে পড়ুন।