इनपुट हैंडलर, आपके ऐप्लिकेशन में परफ़ॉर्मेंस की समस्याओं की वजह हो सकते हैं. ये फ़्रेम को पूरा होने से रोक सकते हैं. साथ ही, इनकी वजह से लेआउट काम करना भी मुश्किल हो सकता है और इसकी वजह से अतिरिक्त काम हो सकता है.
इनपुट हैंडलर की वजह से आपके ऐप्लिकेशन में परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं, क्योंकि वे फ़्रेम को पूरा होने से रोक सकते हैं. साथ ही, इसकी वजह से अतिरिक्त और गै़र-ज़रूरी चीज़ें हो सकती हैं लेआउट वर्क.
खास जानकारी
- लंबे समय तक चलने वाले इनपुट हैंडलर से बचें; वे स्क्रोलिंग को ब्लॉक कर सकते हैं.
- इनपुट हैंडलर में स्टाइल में बदलाव न करें.
- अपने हैंडलर को अस्वीकार करें; इवेंट वैल्यू को स्टोर कर सकती हैं और अगले requestAnimationFrame कॉलबैक में स्टाइल में बदलाव कर सकती हैं.
लंबे समय तक चलने वाले इनपुट हैंडलर से बचें
सबसे तेज़ संभावित स्थिति में, जब कोई उपयोगकर्ता पेज से इंटरैक्ट करता है, तो पेज का कंपोज़िटर थ्रेड उपयोगकर्ता का टच इनपुट ले सकता है. इसके बाद, वह कॉन्टेंट को इधर-उधर ले जा सकता है. इसे मुख्य थ्रेड के ज़रिए कुछ करने की ज़रूरत नहीं होती. इसमें JavaScript, लेआउट, स्टाइल या पेंट का काम होता है.
हालांकि, अगर 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);
ऐसा करने से अपने इनपुट हैंडलर को हल्का रखने का एक और फ़ायदा भी होगा. यह एक अच्छी बात है, क्योंकि अब आप कम्प्यूटेशनल रूप से महंगे कोड पर स्क्रोल करने या टच करने जैसी चीज़ों को ब्लॉक नहीं कर रहे हैं!