स्क्रोलिंग परफ़ॉर्मेंस को बेहतर बनाने के लिए, पैसिव लिसनर का इस्तेमाल करना

टच और व्हील इवेंट लिसनर, उपयोगकर्ता के इंटरैक्शन को ट्रैक करने और स्क्रोल करने के कस्टम अनुभव बनाने के लिए काम के होते हैं. हालांकि, इनसे पेज को स्क्रोल करने में देरी भी हो सकती है. फ़िलहाल, ब्राउज़र यह नहीं जान सकते कि कोई इवेंट लिसनर, स्क्रोलिंग को रोकेगा या नहीं. इसलिए, वे हमेशा पेज को स्क्रोल करने से पहले, लिसनर के एक्ज़ीक्यूट होने का इंतज़ार करते हैं. पैसिव इवेंट लिसनर इस समस्या को हल करते हैं. इनकी मदद से, यह बताया जा सकता है कि कोई इवेंट लिसनर कभी भी स्क्रोलिंग को नहीं रोकेगा.

ब्राउज़र के साथ काम करना

ज़्यादातर ब्राउज़र में पैसिव इवेंट लिसनर काम करते हैं. अलग-अलग ब्राउज़र पर साइट की जांच करना सेक्शन देखें

Lighthouse के पैसिव इवेंट लिस्नर ऑडिट के फ़ेल होने की वजह

Lighthouse, पेज को स्क्रोल करने में देरी करने वाले इवेंट लिसनर को फ़्लैग करता है:

लाइटहाउस ऑडिट से पता चलता है कि पेज, स्क्रोल करने की परफ़ॉर्मेंस को बेहतर बनाने के लिए पैसिव इवेंट लिसनर का इस्तेमाल नहीं करता

स्क्रोल करने की परफ़ॉर्मेंस पर असर डालने वाले इवेंट लिसनर की पहचान करने के लिए, Lighthouse इस प्रोसेस का इस्तेमाल करता है:

  1. पेज पर मौजूद सभी इवेंट लिसनर इकट्ठा करता है.
  2. ऐसे लिसनर को फ़िल्टर करें जो टच और व्हील का इस्तेमाल नहीं करते.
  3. preventDefault() पर कॉल करने वाले श्रोताओं को फ़िल्टर करके हटा दें.
  4. उन श्रोताओं को फ़िल्टर करें जो पेज के होस्ट से अलग हैं.

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

स्क्रोल करने की परफ़ॉर्मेंस को बेहतर बनाने के लिए, इवेंट लिसनर को पैसिव कैसे बनाएं

Lighthouse ने जिन इवेंट लिसनर की पहचान की है उन सभी में passive फ़्लैग जोड़ें.

अगर आपको सिर्फ़ उन ब्राउज़र के साथ काम करना है जिनमें पैसिव इवेंट लिसनर की सुविधा उपलब्ध है, तो सिर्फ़ फ़्लैग जोड़ें. उदाहरण के लिए:

document.addEventListener('touchstart', onTouchStart, {passive: true});

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

संसाधन