Réduire le reflux

• Texte original : Minimiser la redistribution du navigateur
• Auteur : Lindsey Simon
• Traduction: ytzong

Le processus par lequel le navigateur recalcule les positions et les géométries des éléments de la page afin de restituer une partie ou la totalité de la page est appelé redistribution. Étant donné que la redistribution est une opération bloquant l'utilisateur dans le navigateur, il est important de comprendre comment réduire le nombre de redistributions et comment les différents attributs du document (profondeur DOM, efficacité CSS, changements de style sans type) affectent le nombre de redistributions. très nécessaire pour les développeurs. Parfois, un élément d'une page de redistribution redistribuera son élément parent (Annotation : pluriel ici) et tous les éléments enfants.

Diverses opérations utilisateur et modifications DHTML peuvent déclencher une redistribution. L'ajustement de la taille de la fenêtre du navigateur, l'utilisation de javascript pour calculer les styles ( styles calculés ), la création et la suppression d'éléments dans le DOM et la modification de la classe d'éléments déclencheront une redistribution. Il est à noter que certaines opérations déclencheront la refusion plusieurs fois, au-delà de votre imagination. L'image suivante est tirée du discours de Steve Souders « Des sites Web encore plus rapides » :

D'après le tableau ci-dessus, il est évident que tous les styles contrôlés par JavaScript ne déclenchent pas la redistribution dans tous les navigateurs, et même s'ils sont déclenchés, le nombre de fois n'est pas le même. Dans le même temps, on peut constater que les navigateurs modernes maîtrisent de mieux en mieux le nombre de reflows.

Chez Google, nous mesurons la vitesse de nos pages et de nos applications Web de différentes manières, et la redistribution est un facteur clé que nous prenons en compte lors de l'ajout d'une interface utilisateur. Nous nous efforçons d'offrir une expérience utilisateur vivante, interactive et agréable.

en principe

Voici quelques principes pour réduire la refusion :

1. Réduisez les niveaux DOM inutiles (profondeur DOM). La modification d'un niveau dans l'arborescence DOM entraîne des modifications à tous les niveaux, jusqu'à la racine et jusqu'aux enfants du nœud modifié. Cela entraîne beaucoup de temps passé à exécuter la redistribution.
2. Réduisez les règles CSS et supprimez les CSS inutilisés.
3. Si vous apportez des modifications complexes à la présentation, telles que des animations, supprimez-les du flux de documents. Utilisez le positionnement absolu ou le positionnement fixe pour terminer.
4. Évitez les sélecteurs CSS inutilement complexes, en particulier les sélecteurs descendants, car les sélecteurs correspondants consommeront plus de CPU.

Dans la vidéo ci-dessous (Annotation : citée depuis YouTube, ne peut pas être visionnée, veuillez accéder au texte original pour contourner le mur), Lindsey présente quelques méthodes pour réduire la refusion.

Lectures complémentaires

• Notes de Mozilla sur la redistribution HTML
• Repeints et refusions d'Opera
• Démos de redistribution de débogage-Firefox de Satoshi Ueyama :
  • redistribution google.co.jp
  • refusion de mozilla.org
  • redistribution de ja.wikipedia.org
• Nicole Sullivan sur les refusions et les repeints

Traduction originale : http://www.99css.com/2009/06/minimizing-browser-reflow.html