Afin de renvoyer une partie ou une page entière, le processus de recalcul des emplacements et des géométries des éléments de page est appelé reflouer. Étant donné que Reflow est une opération de blocage des utilisateurs dans un navigateur, il est très nécessaire que les développeurs comprennent comment réduire le nombre de reflux et l'impact de différents attributs de documents (profondeur DOM, efficacité CSS et aucun type de changement de style) sur le nombre de reflux. Parfois, un seul élément de la page de reflux reflow son élément parent et tous les éléments enfants.
Il y a plusieurs actions utilisateur et des modifications DHTML qui peuvent déclencher la reflux. Redimensionnez la fenêtre du navigateur, utilisez JavaScript pour calculer les styles, créez des éléments de suppression dans le DOM et changez la classe de l'élément déclenchera le reflux. Il convient de noter que certaines opérations déclencheront la reflux plusieurs fois, au-delà de votre imagination. L'image suivante provient du discours de Steve Souders encore plus rapide sur les sites Web:
Il est évident à partir du tableau ci-dessus que tous les styles contrôlés par JavaScript ne déclenchent pas la reflux dans tous les navigateurs, même si le nombre de déclencheurs est déclenché est différent. Dans le même temps, on peut voir que les navigateurs modernes se portent de mieux en mieux pour contrôler le nombre de reflux.
Chez Google, nous mesurons nos pages et nos applications Web à bien des égards, et Reflow est un facteur clé que nous considérons lors de l'ajout de l'interface utilisateur. Nous nous engageons à transmettre des expériences utilisateur animées, interactives et délicieuses.
en principeVoici quelques principes pour réduire la reflux:
Dans la vidéo ci-dessous (Note de la traduction: citée sur YouTube, ne peut pas être consultée, veuillez aller au texte d'origine pour parcourir le mur), Lindsey présente des moyens de réduire la reflux.
Dès la lecture