Améliorer les performances de défilement avec des écouteurs d'événements passifs
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Kayce Basques
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:
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2016/06/05 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Il n'y a pas l'information dont j'ai besoin"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Trop compliqué/Trop d'étapes"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsolète"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problème de traduction"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Mauvais exemple/Erreur de code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Autre"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile à comprendre"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"J'ai pu résoudre mon problème"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Autre"
}]
{"lastModified": "Derni\u00e8re mise \u00e0 jour le 2016/06/05\u00a0(UTC)."}
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2016/06/05 (UTC)."]]