¿Qué son los oyentes de eventos pasivos?


181

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?


Respuestas:


213

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


1
así que siempre debemos agregar estas líneas de código (al menos para la mayoría de los casos), ¿verdad?
Altiano Gerung

Esto bloquea su motor js en Mozilla. Es mejor que detecte el navegador antes de adjuntar este detector de eventos
yardpenalty.com

@AltianoGerung Cuando el navegador lo recomienda. Verá el mensaje en la pestaña Información o Advertencia de la consola.
snowYetis

@ yardpenalty.com Podemos usar el siguiente polyfill y evitar las verificaciones del navegador. Para los casos de uso de desplazamiento, el uso de oyentes de eventos pasivos es una gran ventaja. github.com/WICG/EventListenerOptions/blob/gh-pages/…
Vikrant Siwach

@Vikrant Siwach buenos consejos. Polyfill es rápido y algo indoloro cuando los manejas todos, digamos polyfill.js
yardpenalty.com
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.