web-dev-qa-db-de.com

Was sind passive Event-Listener?

Während ich daran arbeitete, die Leistung für fortschrittliche Web-Apps zu steigern, stieß ich auf eine neue Funktion Passive Event Listeners und ich finde es schwer, das Konzept zu verstehen.

Was sind Passive Event Listeners und was ist die Notwendigkeit, es in unseren Projekten zu haben?

138

Passive Event Listener sind ein neuer Webstandard, der in Chrome 51) ausgeliefert wird und die Bildlaufleistung erheblich verbessert. Chrome-Versionshinweise.

Entwickler können sich für eine bessere Bildlaufleistung entscheiden, indem sie nicht mehr scrollen müssen, um die Listener von Berührungs- und Radereignissen zu blockieren.

Problem: Alle modernen Browser verfügen über eine Thread-Scrolling-Funktion, mit der das Scrollen reibungslos funktioniert, auch wenn teures JavaScript ausgeführt wird. Diese Optimierung wird jedoch teilweise durch die Notwendigkeit zunichte gemacht auf die Ergebnisse von touchstart- und touchmove -Handlern warten, die den Bildlauf möglicherweise vollständig verhindern, indem preventDefault() für das Ereignis aufgerufen wird.

Lösung: {passive: true}

Indem der Entwickler einen Touch- oder Wheel-Listener als passiv markiert, verspricht er, dass der Handler preventDefault nicht aufruft, 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 Spec , Demo Video , Explainer Doc

160