ইনপুট হ্যান্ডলারগুলো আপনার অ্যাপের পারফরম্যান্স সমস্যার একটি সম্ভাব্য কারণ হতে পারে, কারণ এগুলো ফ্রেম সম্পূর্ণ হতে বাধা দিতে পারে এবং অতিরিক্ত ও অপ্রয়োজনীয় লেআউটের কাজ তৈরি করতে পারে।
ইনপুট হ্যান্ডলারগুলো আপনার অ্যাপের পারফরম্যান্স সমস্যার একটি সম্ভাব্য কারণ হতে পারে, কারণ এগুলো ফ্রেম সম্পূর্ণ হতে বাধা দিতে পারে এবং অতিরিক্ত ও অপ্রয়োজনীয় লেআউটের কাজ তৈরি করতে পারে।
সারসংক্ষেপ
- দীর্ঘক্ষণ ধরে চলা ইনপুট হ্যান্ডলার পরিহার করুন; এগুলো স্ক্রলিংয়ে বাধা সৃষ্টি করতে পারে।
- ইনপুট হ্যান্ডলারগুলিতে স্টাইল পরিবর্তন করবেন না।
- আপনার হ্যান্ডলারগুলোকে ডিবাউন্স করুন; ইভেন্টের মানগুলো সংরক্ষণ করুন এবং পরবর্তী requestAnimationFrame কলব্যাকে স্টাইলের পরিবর্তনগুলো সামলান।
দীর্ঘক্ষণ ধরে চলা ইনপুট হ্যান্ডলার এড়িয়ে চলুন
সবচেয়ে দ্রুততম ক্ষেত্রে, যখন কোনো ব্যবহারকারী পেজটির সাথে ইন্টারঅ্যাক্ট করেন, তখন পেজের কম্পোজিটর থ্রেড ব্যবহারকারীর টাচ ইনপুট গ্রহণ করে কেবল কন্টেন্টটিকে স্থান পরিবর্তন করে দিতে পারে। এর জন্য মেইন থ্রেডের কোনো কাজের প্রয়োজন হয় না, যেখানে জাভাস্ক্রিপ্ট, লেআউট, স্টাইল বা পেইন্টের কাজ সম্পন্ন হয়।
তবে, আপনি যদি touchstart , touchmove , বা touchend মতো কোনো ইনপুট হ্যান্ডলার সংযুক্ত করেন, তাহলে কম্পোজিটর থ্রেডকে অবশ্যই এই হ্যান্ডলারটির এক্সিকিউশন শেষ হওয়া পর্যন্ত অপেক্ষা করতে হবে, কারণ আপনি preventDefault() কল করে টাচ স্ক্রল হওয়া বন্ধ করে দিতে পারেন। এমনকি আপনি preventDefault() কল না করলেও কম্পোজিটরকে অপেক্ষা করতে হয়, এবং এর ফলে ব্যবহারকারীর স্ক্রল ব্লক হয়ে যায়, যার পরিণতিতে স্টাটারিং এবং ফ্রেম মিস হতে পারে।
সংক্ষেপে, আপনাকে নিশ্চিত করতে হবে যে আপনার চালানো যেকোনো ইনপুট হ্যান্ডলার যেন দ্রুত কার্যকর হয় এবং কম্পোজিটরকে তার কাজ করতে সুযোগ করে দেয়।
ইনপুট হ্যান্ডলারগুলিতে স্টাইল পরিবর্তন এড়িয়ে চলুন
স্ক্রল এবং টাচের মতো ইনপুট হ্যান্ডলারগুলোকে যেকোনো requestAnimationFrame কলব্যাকের ঠিক আগে চালানোর জন্য শিডিউল করা হয়।
আপনি যদি ওই হ্যান্ডলারগুলোর কোনো একটির ভেতরে কোনো ভিজ্যুয়াল পরিবর্তন করেন, তাহলে requestAnimationFrame শুরু হওয়ার সময় কিছু স্টাইল পরিবর্তন পেন্ডিং অবস্থায় থাকবে। এরপর যদি আপনি requestAnimationFrame কলব্যাকের শুরুতে ভিজ্যুয়াল প্রোপার্টিগুলো পড়েন, যেমনটা “ বড়, জটিল লেআউট এবং লেআউট থ্র্যাশিং এড়িয়ে চলুন ” শীর্ষক পরামর্শে বলা হয়েছে, তাহলে একটি জোরপূর্বক সিনক্রোনাস লেআউট চালু হয়ে যাবে!
আপনার স্ক্রোল হ্যান্ডলারগুলিকে ডিবাউন্স করুন
উপরের উভয় সমস্যার সমাধান একই: ভিজ্যুয়াল পরিবর্তনগুলোকে সর্বদা পরবর্তী requestAnimationFrame কলব্যাকে ডিবাউন্স করা উচিত।
function onScroll (evt) {
// Store the scroll value for laterz.
lastScrollY = window.scrollY;
// Prevent multiple rAF callbacks.
if (scheduledAnimationFrame)
return;
scheduledAnimationFrame = true;
requestAnimationFrame(readAndUpdatePage);
}
window.addEventListener('scroll', onScroll);
এটি করার আরেকটি বাড়তি সুবিধা হলো, এতে আপনার ইনপুট হ্যান্ডলারগুলো হালকা থাকে, যা খুবই চমৎকার, কারণ এর ফলে আপনাকে স্ক্রলিং বা টাচের মতো বিষয়গুলোকে গণনাগতভাবে ব্যয়বহুল কোডে ব্লক করতে হয় না!