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

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

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

खास जानकारी

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

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