¿Qué son los oyentes de eventos pasivos?

Mientras trabajaba para aumentar el rendimiento de las aplicaciones web progresivas, me encontré con una nueva característica Passive Event Listenersy me resulta difícil entender el concepto.

¿Qué son Passive Event Listenersy cuál es la necesidad de tenerlo en nuestros proyectos?

Los oyentes de eventos pasivos son un estándar web emergente, una nueva característica incluida en Chrome 51 que proporciona un gran impulso potencial para el rendimiento de desplazamiento. Notas de lanzamiento de Chrome.

Permite a los desarrolladores optar por un mejor rendimiento de desplazamiento al eliminar la necesidad de desplazarse para bloquear los oyentes de eventos táctiles y de rueda.

Problema: todos los navegadores modernos tienen una función de desplazamiento roscado para permitir que el desplazamiento se ejecute sin problemas incluso cuando se está ejecutando JavaScript costoso, pero esta optimización es parcialmente derrotada por la necesidad de esperar los resultados de cualquiera touchstarty los touchmovecontroladores, lo que puede evitar el desplazamiento por completo llamando preventDefault()en el evento

Solución: {passive: true}

Al marcar un oyente táctil o de rueda como pasivo, el desarrollador promete que el controlador no llamará preventDefaultpara deshabilitar el desplazamiento. 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);

Especificaciones DOM , Video Demo , Doc Explicador