Was sind passive Ereignis-Listener?

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?

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