अपने इनपुट हैंडलर को बंद करें

इनपुट हैंडलर, आपके ऐप्लिकेशन की परफ़ॉर्मेंस से जुड़ी समस्याओं की संभावित वजह हो सकते हैं. इसकी वजह यह है कि ये फ़्रेम को पूरा होने से रोक सकते हैं. साथ ही, इनकी वजह से लेआउट में अतिरिक्त और ग़ैर-ज़रूरी काम भी हो सकता है.

इनपुट हैंडलर की वजह से आपके ऐप्लिकेशन में परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं. इनसे फ़्रेम को पूरा होने से रोका जा सकता है. साथ ही, इनकी वजह से अतिरिक्त और ग़ैर-ज़रूरी लेआउट काम हो सकता है.

खास जानकारी

• लंबे समय तक चलने वाले इनपुट हैंडलर से बचें. ये स्क्रोलिंग को ब्लॉक कर सकते हैं.
• इनपुट हैंडलर में स्टाइल में बदलाव न करें.
• अपने हैंडलर को बंद करें और इवेंट की वैल्यू स्टोर करें. साथ ही, अगले 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);

ऐसा करने से अपने इनपुट हैंडलर को हल्का रखने का एक और फ़ायदा भी होगा. यह एक अच्छी बात है, क्योंकि अब आप कम्प्यूटेशनल रूप से महंगे कोड पर स्क्रोल करने या टच करने जैसी चीज़ों को ब्लॉक नहीं कर रहे हैं!