Os ouvintes de eventos passivos são um novo padrão da Web emergente, lançado no Chrome 51, que fornece um grande impulso potencial ao desempenho da rolagem. Notas de versão do Chrome.
Ele permite que os desenvolvedores optem por melhorar o desempenho da rolagem, eliminando a necessidade de rolagem para bloquear os ouvintes de eventos por toque e roda.
Problema: Todos os navegadores modernos têm um recurso de rolagem encadeada para permitir que a rolagem seja executada sem problemas, mesmo quando o JavaScript caro está sendo executado, mas essa otimização é parcialmente derrotada pela necessidade de aguardar os resultados de any touchstart
e touchmove
handlers, o que pode impedir a rolagem totalmente chamando preventDefault()
no evento.
Solução: {passive: true}
Ao marcar um ouvinte de toque ou roda como passivo, o desenvolvedor promete que o manipulador não ligará preventDefault
para desativar a rolagem. 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);
Especificação do DOM , vídeo de demonstração , documento explicativo