ইনপুট হ্যান্ডলারগুলি আপনার অ্যাপে পারফরম্যান্স সমস্যার একটি সম্ভাব্য কারণ, কারণ তারা ফ্রেমগুলি সম্পূর্ণ হওয়া থেকে ব্লক করতে পারে এবং অতিরিক্ত এবং অপ্রয়োজনীয় লেআউটের কাজ করতে পারে৷
ইনপুট হ্যান্ডলারগুলি আপনার অ্যাপে পারফরম্যান্স সমস্যার একটি সম্ভাব্য কারণ, কারণ তারা ফ্রেমগুলি সম্পূর্ণ হওয়া থেকে ব্লক করতে পারে এবং অতিরিক্ত এবং অপ্রয়োজনীয় লেআউটের কাজ করতে পারে৷
সারাংশ
- দীর্ঘস্থায়ী ইনপুট হ্যান্ডলার এড়িয়ে চলুন; তারা স্ক্রোলিং ব্লক করতে পারে।
- ইনপুট হ্যান্ডলারে শৈলী পরিবর্তন করবেন না।
- আপনার হ্যান্ডলারদের ডিবাউন্স করুন; ইভেন্ট মান সঞ্চয় করুন এবং পরবর্তী অনুরোধ অ্যানিমেশনফ্রেম কলব্যাকে শৈলী পরিবর্তনগুলি মোকাবেলা করুন।
দীর্ঘস্থায়ী ইনপুট হ্যান্ডলার এড়িয়ে চলুন
দ্রুততম সম্ভাব্য ক্ষেত্রে, যখন একজন ব্যবহারকারী পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করেন, তখন পৃষ্ঠার কম্পোজিটর থ্রেড ব্যবহারকারীর স্পর্শ ইনপুট নিতে পারে এবং কেবল বিষয়বস্তুকে চারপাশে সরাতে পারে। এর জন্য প্রধান থ্রেড দ্বারা কোন কাজ করার প্রয়োজন নেই, যেখানে জাভাস্ক্রিপ্ট, লেআউট, শৈলী বা পেইন্ট করা হয়।
যাইহোক, যদি আপনি touchstart , touchmove , বা touchend মত একটি ইনপুট হ্যান্ডলার সংযুক্ত করেন, তাহলে কম্পোজিটর থ্রেডটিকে অবশ্যই এই হ্যান্ডলারটি কার্যকর করা শেষ করার জন্য অপেক্ষা করতে হবে কারণ আপনি preventDefault() কল করতে এবং টাচ স্ক্রোলটি হওয়া থেকে বিরত থাকতে পারেন৷ এমনকি আপনি preventDefault() কল না করলেও কম্পোজিটরকে অপেক্ষা করতে হবে, এবং এর ফলে ব্যবহারকারীর স্ক্রোল ব্লক করা হয়েছে, যার ফলে তোতলামি এবং ফ্রেম মিস হতে পারে।
সংক্ষেপে, আপনার নিশ্চিত হওয়া উচিত যে আপনি যে কোনো ইনপুট হ্যান্ডলার চালান তা দ্রুত কার্যকর করা উচিত এবং কম্পোজিটরকে তার কাজ করার অনুমতি দেওয়া উচিত।
ইনপুট হ্যান্ডলারে শৈলী পরিবর্তন এড়িয়ে চলুন
ইনপুট হ্যান্ডলার, যেমন স্ক্রোল এবং স্পর্শের জন্য, কোনো 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);
এটি করার ফলে আপনার ইনপুট হ্যান্ডলারগুলিকে হালকা রাখার অতিরিক্ত সুবিধা রয়েছে, যা দুর্দান্ত কারণ এখন আপনি কম্পিউটেশনালভাবে ব্যয়বহুল কোডে স্ক্রোলিং বা স্পর্শ করার মতো জিনিসগুলিকে ব্লক করছেন না!