Escuchadores de eventos pasivos

Silktide carga tus páginas en un navegador real y busca scripts que escuchan Eventos táctiles y de rueda del ratón de una forma que puede retrasar el desplazamiento. Marcar estos escuchadores como pasivos permite que el navegador se desplace inmediatamente.

Cuando un script escucha eventos táctiles o de rueda, el navegador debe esperar a que ese script se ejecute antes de desplazarse, por si el script cancela el desplazamiento. En páginas con mucha actividad esto hace que el desplazamiento tenga tirones o retrasos: uno de los problemas más perceptibles, especialmente en teléfonos.

Por qué es importante

Desplazarse es lo más habitual que hacen los visitantes en una página, y la gente se da cuenta de inmediato cuando no es fluido. Una página que duda o da tirones bajo el dedo parece rota incluso cuando todo funciona, y esa impresión es aún peor en móvil, donde el desplazamiento táctil es constante.

Cómo solucionarlo

Marca los escuchadores de toque y de rueda como pasivos, lo que le garantiza al navegador que no cancelarán el desplazamiento:

\/\/ Bloquea el desplazamiento hasta que se ejecute el controlador
document.addEventListener('touchstart', onTouchStart);

\/\/ Pasivo: el navegador se desplaza de inmediato
document.addEventListener('touchstart', onTouchStart, { passive: true });

Añade { passive: true } a tus propios escuchadores de touchstart, touchmove, wheel y mousewheel, a menos que un escuchador realmente llame a preventDefault() para detener el desplazamiento.
Para los escuchadores señalados dentro de scripts de terceros, comprueba si existe una versión actualizada de la biblioteca o comunícalo al proveedor; consulta Código de terceros.

Todos los navegadores modernos admiten escuchadores pasivos; solo los muy antiguos necesitan detección de características.

Cómo lo prueba Silktide

Carga la página en un navegador real y busca escuchadores de eventos táctiles y de rueda que no estén marcados como pasivos y puedan retrasar el desplazamiento.
Informa del script que contiene cada escuchador, con la línea en la que se registra.

Solución de problemas

Mi escuchador necesita cancelar el desplazamiento

Un escuchador que realmente llama a preventDefault() para detener el desplazamiento no puede ser pasivo: marcarlo como pasivo hace que el navegador ignore la llamada a preventDefault(). Si un escuchador señalado realmente debe cancelar el desplazamiento, dejarlo como no pasivo es correcto; plantéate restringir dónde se adjunta para que no afecte al desplazamiento en otras partes de la página.