Was sind passive Ereignis-Listener?

180

Während ich daran arbeitete, die Leistung für progressive Web-Apps zu steigern, stieß ich auf eine neue Funktion, Passive Event Listenersund es fällt mir schwer, das Konzept zu verstehen.

Was ist Passive Event Listenersund was ist die Notwendigkeit, es in unseren Projekten zu haben?

Vivek Pratap Singh
quelle

Antworten:

212

Passive Event-Listener sind ein neuer Webstandard, eine neue Funktion in Chrome 51, die die Scroll-Leistung erheblich steigern kann. Chrome Versionshinweise.

Entwickler können sich für eine bessere Bildlaufleistung anmelden, da kein Bildlauf mehr erforderlich ist, um die Listener von Berührungs- und Radereignissen zu blockieren.

Problem: Alle modernen Browser haben eine Gewinde Funktion Scrollen Scrollen zu ermöglichen , auch dann glatt laufen , wenn teuer JavaScript ausgeführt wird , aber diese Optimierung wird durch die Notwendigkeit zu warten , bis die Ergebnisse etwaiger teilweise besiegt touchstartund touchmoveHandler, die die Schriftrolle ganz verhindern kann durch den Aufruf preventDefault()auf der Veranstaltung.

Lösung: {passive: true}

Durch das Markieren eines Touch- oder Wheel-Listeners als passiv verspricht der Entwickler, dass der Handler nicht aufruft preventDefault, um das Scrollen zu deaktivieren. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

document.addEventListener("touchstart", function(e) {
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
}, Modernizr.passiveeventlisteners ? {passive: true} : false);

DOM-Spezifikation , Demo-Video , Erklärungsdokument

Vivek Pratap Singh
quelle
1
Wir sollten also immer diese Codezeilen hinzufügen (zumindest in den meisten Fällen), oder?
Altiano Gerung
Dies stürzt Ihre js-Engine in Mozilla ab. Sie sollten den Browser besser erkennen, bevor Sie diesen Ereignis-Listener
anhängen
@AltianoGerung Wenn der Browser es empfiehlt. Sie sehen die Meldung auf der Registerkarte Info oder Warnung der Konsole.
snowYetis
@yardpenalty.com Wir können die folgende Polyfüllung verwenden und die Browserprüfungen vermeiden. Für das Scrollen von Anwendungsfällen ist die Verwendung passiver Ereignis-Listener ein großes Plus. github.com/WICG/EventListenerOptions/blob/gh-pages/…
Vikrant Siwach
@ Vikrant Siwach toller Rat. Polyfill ist schnell und etwas schmerzlos, wenn Sie alle in beispielsweise
polyfill.js