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

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

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

खास जानकारी

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

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