৭টি লুকানো JavaScript Bottlenecks এবং সেগুলো কীভাবে সমাধান করবেন
ধীরগতির ওয়েব অ্যাপগুলো খুব কমই খারাপ অ্যালগরিদমের কারণে ব্যর্থ হয়। এগুলো ব্যর্থ হয় কারণ আপনার কোড ব্রাউজারের সাথে কীভাবে যোগাযোগ করছে।
আমি ৩০০টি প্রোডাকশন অ্যাপ্লিকেশন প্রোফাইল করেছি। পারফরম্যান্সের সমস্যার ৭৩% আসে এই ৭টি উৎস থেকে।
১. Layout thrashing এটি তখন ঘটে যখন আপনি একটি প্রপার্টি রিড করেন, DOM-এ রাইট করেন এবং আবার রিড করেন। এটি ব্রাউজারকে বারবার লেআউট পুনরায় গণনা করতে বাধ্য করে।
- সমাধান: প্রথমে সব রিড (read) একসাথে করুন। তারপর
requestAnimationFrameব্যবহার করে সব রাইট (write) একসাথে করুন।
২. Unbounded event listeners ইভেন্ট লিসেনার যোগ করার পর তা রিমুভ না করলে মেমরি লিক (memory leaks) তৈরি হয়। সিঙ্গেল-পেজ অ্যাপের ক্ষেত্রে এটি একটি বড় সমস্যা।
- সমাধান: কম্পোনেন্ট আনমাউন্ট (unmount) হওয়ার সময় লিসেনারগুলো পরিষ্কার করতে
AbortControllerব্যবহার করুন।
৩. Synchronous DOM reads in loops
লুপের ভেতরে offsetWidth বা getBoundingClientRect রিড করলে ক্রমাগত reflow ঘটে।
- সমাধান: লুপ শুরু করার আগে লেআউট ভ্যালুগুলো একটি ভেরিয়েবলে ক্যাশ (cache) করে রাখুন।
৪. Missing requestAnimationFrame batching স্ক্রল বা রিসাইজ ইভেন্টের সময় সরাসরি DOM পরিবর্তন করলে তা খুব ঘনঘন ঘটে। এর ফলে jank তৈরি হয়।
- সমাধান: পেইন্ট সাইকেলের (paint cycle) সাথে আপডেটগুলো সিঙ্ক করতে একটি ticking variable এবং
requestAnimationFrameব্যবহার করুন।
৫. Large JSON.parse payloads বড় ফাইল পার্স (parse) করলে মেইন থ্রেড ব্লক হয়ে যায়। এর ফলে ইনপুট ল্যাগ (input lag) তৈরি হয়।
- সমাধান: মেইন থ্রেড থেকে ডেটা পার্স করার জন্য Web Workers ব্যবহার করুন।
৬. Complex CSS selector matching গভীরভাবে নেস্টেড বা জটিল সিলেক্টরগুলো স্টাইল রিক্যালকুলেশনকে ধীর করে দেয়।
- সমাধান: লেআউট শিফট (layout shifts) খুঁজে পেতে Lighthouse ব্যবহার করুন এবং আপনার সিলেক্টরগুলোকে সহজ করুন।
৭. Duplicate bundle chunks বড় এবং অপ্টিমাইজ না করা বান্ডেলগুলো ট্রান্সফার টাইম নষ্ট করে।
- সমাধান: ডুপ্লিকেট কোড খুঁজে বের করতে এবং রিমুভ করতে
webpack-bundle-analyzerব্যবহার করুন।
আপনার অগ্রগতি কীভাবে পরিমাপ করবেন:
- Chrome DevTools ওপেন করুন।
- Performance ট্যাবে যান।
- ৫ সেকেন্ডের একটি সেশন রেকর্ড করুন।
- Main flame chart-এ ৫০ms-এর বেশি সময়ের টাস্কগুলো খুঁজুন।
- একটি সমাধান প্রয়োগ করুন এবং Rendering ও Painting টাইম তুলনা করুন।
এই বিষয়গুলো ঠিক করলে আপনার Core Web Vitals উন্নত হবে, বিশেষ করে Largest Contentful Paint এবং Interaction to Next Paint।