¿Qué son los oyentes pasivos de eventos?
Mientras trabajaba para mejorar el rendimiento de aplicaciones web progresivas, encontré 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 detectores de eventos pasivos son un estándar web emergente, una nueva característica incluida en Chrome 51 que proporciona un importante impulso potencial al rendimiento de desplazamiento. Notas de la versión de Chrome.
Permite a los desarrolladores optar por un mejor rendimiento de desplazamiento al eliminar la necesidad de desplazarse para bloquear los detectores de eventos táctiles y de rueda.
Problema: todos los navegadores modernos tienen una función de desplazamiento por subprocesos para permitir que el desplazamiento se ejecute sin problemas incluso cuando se ejecuta JavaScript costoso, pero esta optimización se ve parcialmente frustrada por la necesidad de esperar los resultados de cualquiera de los touchstartcontroladores touchmove, lo que puede impedir el desplazamiento por completo llamando preventDefault()sobre 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 desactivar el desplazamiento. Esto libera al navegador para que responda al desplazamiento inmediatamente sin esperar a JavaScript, lo que garantiza una experiencia de desplazamiento fluida y confiable para el usuario.
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 , vídeo de demostración , documento explicativo