wheel स्क्रोल/ज़ूम करने की परफ़ॉर्मेंस को बेहतर बनाने के लिए, डेवलपर को {passive: true} विकल्प को addEventListener() पर पास करके, wheel और mousewheel इवेंट लिसनर को पैसिव के तौर पर रजिस्टर करें. इवेंट लिसनर को पैसिव के तौर पर रजिस्टर करने से ब्राउज़र को यह पता चलता है कि व्हील लिसनर preventDefault() को कॉल नहीं करेगा. साथ ही, लिसनर को ब्लॉक किए बिना ब्राउज़र, स्क्रोल और ज़ूम करने की सुविधा सुरक्षित तरीके से पूरा कर सकता है.
समस्या यह है कि ज़्यादातर व्हील इवेंट लिसनर सैद्धांतिक तौर पर पैसिव होते हैं (preventDefault() को कॉल नहीं करते) लेकिन उनके बारे में साफ़ तौर पर नहीं बताया जाता है. इसलिए, ब्राउज़र को स्क्रोल/ज़ूम करने से पहले JS इवेंट हैंडलिंग के खत्म होने का इंतज़ार करना पड़ता है, जबकि इंतज़ार करना ज़रूरी नहीं होता. Chrome 56 में,
हमने touchstart और touchmove के लिए इस समस्या को ठीक कर दिया है.
इस बदलाव को बाद में Safari और Firefox दोनों में अपनाया गया. जैसा कि उस समय हमने बनाए गए डेमो वीडियो से देखा था. इसमें, स्क्रीन को स्क्रोल करने पर ज़्यादा समय लगने की वजह से, ऐप्लिकेशन को हूबहू दिखाने में देरी हो गई. अब Chrome 73 में, हमने
wheel और mousewheel इवेंट पर भी यही इंटरवेंशन लागू किया है.
द इंटरवेंशन
हमारा लक्ष्य इस बदलाव के साथ, व्हील या टचपैड पर स्क्रोल करने के बाद डिसप्ले को अपडेट होने में लगने वाले समय को कम करना है. इसके लिए, डेवलपर को कोड बदलने की ज़रूरत नहीं है. हमारी मेट्रिक से पता चलता है कि रूट टारगेट (विंडो, दस्तावेज़ या मुख्य हिस्से) पर रजिस्टर किए गए wheel और mousewheel इवेंट के 75% लोग, पैसिव विकल्प के लिए कोई वैल्यू नहीं बताते हैं. साथ ही, ऐसे 98% से ज़्यादा लोग preventDefault() को कॉल नहीं करते हैं. Chrome 73 में, हम रूट टारगेट (विंडो, दस्तावेज़ या मुख्य भाग) पर रजिस्टर किए गए wheel और mousewheel लिसनर को डिफ़ॉल्ट रूप से पैसिव में बदल रहे हैं. इसका मतलब है कि इवेंट की पहचान करने वाला
जैसे:
window.addEventListener("wheel", func);
इसके बराबर हो जाता है:
window.addEventListener("wheel", func, {passive: true});
साथ ही, लिसनर में preventDefault() को कॉल करने पर, उसे
इस DevTools चेतावनी के साथ अनदेखा कर दिया जाएगा:
[Intervention] Unable to preventDefault inside passive event listener due
to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
ब्रेकेज और सलाह
ज़्यादातर मामलों में, किसी भी तरह के नुकसान से जुड़ी जानकारी नहीं देखी जाती है. कुछ मामलों में ही (हमारी मेट्रिक के हिसाब से पेजों की संख्या 0.3% से कम) अनजाने में स्क्रोल या ज़ूम इन हो सकती है. ऐसा इसलिए होता है, क्योंकि सुनने वालों में preventDefault() कॉल को अनदेखा कर दिया जाता है और उन्हें डिफ़ॉल्ट रूप से पैसिव माना जाता है. आपका ऐप्लिकेशन
यह तय कर सकता है कि क्या आस-पास यह गतिविधि की जा रही है. इसके लिए, यह देखना होगा कि
preventDefault() को कॉल करने पर defaultPrevented प्रॉपर्टी के ज़रिए, कॉल करने का कोई असर हुआ है या नहीं. जिन मामलों में समस्या का असर पड़ा है उन्हें ठीक करना आसान है: डिफ़ॉल्ट कार्रवाई को बदलने और इवेंट सुनने वाले को ब्लॉक करने वाले व्यक्ति के तौर पर सुरक्षित रखने के लिए, {passive: false} को addEventListener() पर पास करें.