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