Réduire la rediffusion du navigateur

Auteur: Lindsey Simon, développeur de l'expérience utilisateur

Connaissances recommandées: HTML de base, JavaScript de base, connaissance pratique du CSS

"reflow" est le nom du processus du navigateur Web permettant de recalculer les positions et les géométries des éléments du document dans le but de réafficher une partie ou la totalité du document. Étant donné que le reflow est une opération bloquant l'utilisateur dans le navigateur, il est utile pour les développeurs de comprendre comment améliorer le temps de reflow, ainsi que 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. Parfois, la rediffusion d'un seul élément du document peut nécessiter la rediffusion de ses éléments parents, ainsi que de tous les éléments qui suivent.

Il existe une grande variété d'actions utilisateur et de modifications DHTML possibles pouvant déclencher une rediffusion. Le redimensionnement de la fenêtre du navigateur, l'utilisation de méthodes JavaScript impliquant des styles calculés, l'ajout ou la suppression d'éléments du DOM et la modification des classes d'un élément sont quelques-uns des éléments pouvant déclencher la rediffusion. Notez que certaines opérations peuvent entraîner un temps de reflow plus long que vous ne l'imaginiez. Prenons l'exemple du diagramme suivant de Steve Souders, intitulé Sites Web plus rapides :

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

Google teste la vitesse de ses pages Web et de ses applications de différentes manières. La rediffusion 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 interactives, agréables et dynamiques.

Consignes

Voici quelques consignes simples qui vous aideront à minimiser 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, jusqu'à la racine et jusqu'aux enfants du nœud modifié. Vous passez ainsi plus de temps à effectuer une rediffusion.
  2. Réduisez les règles CSS et supprimez celles qui ne sont pas utilisées.
  3. Si vous apportez des modifications complexes à l'affichage, telles que des animations, quittez-les. Pour ce faire, utilisez une position absolue ou fixe.
  4. Évitez les sélecteurs CSS complexes et superflus, 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 minimiser la rediffusion de vos pages:

Ressources supplémentaires

Commentaires

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