Réduire la rediffusion du navigateur

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Auteur: Lindsey Simon, développeur d'expériences utilisateur

Connaissances recommandées: HTML de base, JavaScript de base, connaissances pratiques des CSS

"reflow" est le nom du processus de navigateur Web permettant de recalculer les positions et les géométries des éléments du document, dans le but d'afficher à nouveau tout ou partie du document. Étant donné que le reflow est une opération bloquant les utilisateurs dans le navigateur, il est utile pour les développeurs de comprendre comment améliorer le temps de reflow et comprendre les effets de différentes propriétés de document (profondeur de DOM, efficacité des règles CSS, différents types de changements de style) sur le temps de reflow. La rediffusion d'un élément dans le document peut nécessiter l'ajustement de ses éléments parents et de tous les éléments qui suivent.

Il existe une grande variété d'actions utilisateur et de modifications DHTML possibles pouvant déclencher un reflow. Redimensionnez la fenêtre du navigateur, utilisez des méthodes JavaScript impliquant des styles calculés, ajoutez ou supprimez des éléments du DOM, et modifiez les classes d'un élément pour déclencher un reflow. Il est également intéressant de noter que certaines opérations peuvent occasionner un temps de reflow plus long que vous ne l'aviez imaginé. Consultez le schéma suivant de Steve Souders, qui est un site Web encore plus rapide :

D'après le tableau ci-dessus, toutes les modifications apportées au style dans JavaScript entraînent un reflow dans tous les navigateurs, et le temps nécessaire à la rediffusion varie. Il est également assez clair que les navigateurs modernes s'améliorent au moment de la rediffusion.

Chez Google, nous testons la vitesse de nos pages Web et de nos applications de diverses manières. Le reflow est un facteur clé que nous prenons en compte lorsque nous ajoutons des fonctionnalités à nos interfaces utilisateur. Nous nous efforçons d'offrir des expériences utilisateur dynamiques, interactives et agréables.

Consignes

Voici quelques consignes simples pour vous aider à réduire la mise en page de vos pages Web:

  1. Réduisez les profondeurs de DOM inutiles. Les modifications à un niveau de l'arborescence DOM peuvent entraîner des modifications à chaque niveau de l'arborescence, de la racine jusqu'à la racine des enfants du nœud modifié. Cela permet de consacrer plus de temps à la rediffusion.
  2. Réduisez les règles CSS et supprimez les règles CSS non utilisées.
  3. Si vous apportez des modifications complexes à l'affichage, telles que des animations, faites-le à partir du flux. Pour ce faire, utilisez un emplacement absolu ou fixe.
  4. Évitez les sélecteurs CSS complexes et inutiles, en particulier les sélecteurs descendants, qui nécessitent davantage de puissance de processeur pour effectuer la mise en correspondance des sélecteurs.

Dans cette vidéo, Lindsey explique quelques méthodes simples pour réduire la mise en page de vos pages:

Autres ressources

Commentaires

Cette page vous a-t-elle été utile ?