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

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

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

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

Lighthouse पैसिव इवेंट लिसनर का ऑडिट कैसे काम नहीं करेगा

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

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

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

  1. पेज पर सभी इवेंट लिसनर इकट्ठा करें.
  2. नॉन-टच और नॉन-व्हील लिसनर को फ़िल्टर करें.
  3. preventDefault() को कॉल करने वाले लिसनर को फ़िल्टर करें.
  4. उन लिसनर को फ़िल्टर करें जो पेज के बजाय किसी दूसरे होस्ट से हैं.

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

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

इवेंट लिसनर के तौर पर पहचाने गए हर इवेंट लिसनर के लिए, passive फ़्लैग जोड़ें.

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

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

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

संसाधन