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});
साथ ही, अगर listener फ़ंक्शन में 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() पर पास करें और इवेंट लिसनर को ब्लॉकिंग के तौर पर बनाए रखें.