Om de scroll-/zoomprestaties wheel te verbeteren, worden ontwikkelaars aangemoedigd om wheel en mousewheel als passief te registreren door de optie {passive: true} door te geven aan addEventListener() . Door de gebeurtenislisteners als passief te registreren, weet de browser dat de wiellisteners preventDefault() niet zullen aanroepen en dat de browser veilig kan scrollen en zoomen zonder de luisteraars te blokkeren.
Het probleem is dat de luisteraars van wielgebeurtenissen meestal conceptueel passief zijn (roep preventDefault() niet aan) maar niet expliciet als zodanig zijn gespecificeerd, waardoor de browser moet wachten tot de afhandeling van de JS-gebeurtenis is voltooid voordat deze begint met scrollen/zoomen, ook al wacht hij. Is niet nodig. In Chrome 56 hebben we dit probleem opgelost voor touchstart en touchmove , en die wijziging werd later overgenomen door zowel Safari als Firefox. Zoals je kunt zien in de demonstratievideo die we destijds maakten, zorgde het gedrag zoals het was voor een merkbare vertraging in de scrollreactie. In Chrome 73 hebben we dezelfde interventie toegepast op wheel en mousewheel .
De interventie
Ons doel met deze wijziging is om de tijd die nodig is om het scherm bij te werken te verkorten nadat de gebruiker begint te scrollen met het wiel of touchpad, zonder dat ontwikkelaars de code hoeven te wijzigen. Uit onze statistieken blijkt dat 75% van de wheel en mousewheel die zijn geregistreerd op hoofddoelen (venster, document of hoofdtekst) geen waarden specificeren voor de passieve optie en dat meer dan 98% van dergelijke luisteraars preventDefault() niet aanroept. . In Chrome 73 wijzigen we de wheel en mousewheel listeners die zijn geregistreerd op hoofddoelen (venster, document of hoofdtekst) standaard passief. Het betekent dat een gebeurtenislistener zoals:
window.addEventListener("wheel", func);
wordt gelijk aan:
window.addEventListener("wheel", func, {passive: true});
En het aanroepen van preventDefault() binnen de luisteraar wordt genegeerd met de volgende DevTools-waarschuwing:
[Intervention] Unable to preventDefault inside passive event listener due
to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
Breuk en begeleiding
In de overgrote meerderheid van de gevallen zal er geen breuk worden waargenomen. Alleen in zeldzame gevallen (minder dan 0,3% van de pagina's volgens onze statistieken) kan onbedoeld scrollen/zoomen plaatsvinden doordat de aanroep preventDefault() wordt genegeerd binnen de luisteraars die standaard als passief worden behandeld. Uw toepassing kan bepalen of dit in het wild voorkomt door te controleren of het aanroepen van preventDefault() enig effect heeft gehad via de eigenschap defaultPrevented . De oplossing voor de getroffen gevallen is relatief eenvoudig: geef {passive: false} door aan addEventListener() om het standaardgedrag te overschrijven en de gebeurtenislistener als blokkerend te behouden.