Améliorer les performances de défilement avec des écouteurs d'événements passifs

Depuis Chrome 51, les écouteurs d'événements passifs sont une nouvelle norme Web qui permet d'améliorer considérablement les performances de défilement, en particulier sur mobile. Regardez la vidéo ci-dessous pour voir une démonstration côte à côte de ces améliorations:

Comment ça marche ?

On parle d'à-coups lorsque vous faites défiler une page et qu'il y a un tel délai qu'elle ne semble pas ancrée à votre doigt. Souvent, les à-coups lors du défilement sont dus à un écouteur d'événements tactiles. Les écouteurs d'événements tactiles sont souvent utiles pour suivre les interactions des utilisateurs et créer des expériences de défilement personnalisées (par exemple, pour annuler complètement le défilement lors d'une interaction avec une carte Google intégrée). Actuellement, les navigateurs ne peuvent pas savoir si un écouteur d'événements tactiles va annuler le défilement. Ils attendent donc toujours la fin de l'écouteur avant de faire défiler la page. Les écouteurs d'événements passifs résolvent ce problème en vous permettant de définir un indicateur dans le paramètre options de addEventListener, qui indique que l'écouteur n'annulera jamais le défilement. Ces informations permettent aux navigateurs de faire défiler la page immédiatement, plutôt qu'après la fin de l'écouteur.

En savoir plus

Consultez le blog Chromium pour découvrir en détail le fonctionnement des écouteurs d'événements passifs:

Nouvelles API pour aider les développeurs à améliorer les performances de défilement

Dépôt de la spécification pour apprendre à implémenter des écouteurs d'événements passifs:

Explication de l'écouteur d'événements passifs