Dans le développement Web, la redistribution et le repaint sont des concepts courants et ils ont un impact important sur les performances des pages Web et l'expérience utilisateur. Cet article présentera la différence entre la redistribution et le redessinage, ainsi que les conditions de déclenchement, et joindra des exemples de code correspondants.
Le concept de refusion et de redessinage
1. Décrivez brièvement le concept de réarrangement
Une fois que le navigateur a téléchargé tous les composants (HTML, JavaScript, CSS, images) de la page, il analysera et générera deux structures de données internes (arborescence DOM et arborescence de rendu). L'arborescence DOM représente la structure de la page et l'arborescence de rendu représente comment les nœuds DOM sont affichés. Le réarrangement est un changement dans les propriétés géométriques des éléments DOM, un changement dans la structure de l'arborescence DOM et l'arbre de rendu doit être recalculé.
2. Décrivez brièvement le concept de redessinage
Le redessinage est un comportement du navigateur déclenché par une modification de l'apparence d'un élément, telle que la modification d'attributs tels que la visibilité, le contour et la couleur d'arrière-plan. Le navigateur redessinera l'élément en fonction de ses nouveaux attributs, donnant à l'élément une nouvelle apparence. En raison de la disposition du flux du navigateur, le calcul de l'arbre de rendu ne doit généralement être parcouru qu'une seule fois. À l'exception de la table et de ses éléments internes, elle peut nécessiter plusieurs calculs pour déterminer les valeurs d'attribut de ses nœuds dans l'arbre de rendu, ce qui prend deux fois plus de temps que les éléments équivalents. C'est l'une des raisons pour lesquelles nous essayons d'éviter d'utiliser la table. pages de mise en page. .
La différence entre redistribuer et redessiner
La redistribution et le redessin sont deux processus importants lorsque le navigateur affiche des pages Web. La redistribution fait référence à la modification de la structure de l'arborescence DOM ou du style d'un élément, obligeant le navigateur à recalculer la position et la taille de l'élément avant de le dessiner à l'écran. Redessiner signifie que lorsque le changement de style d'un élément n'affecte pas sa position et sa taille dans le flux de documents, mais affecte uniquement son apparence, le navigateur effectuera une opération de redessin et redessinera ces éléments.
Dans quelles circonstances la redistribution et le redessin seront-ils déclenchés ?
Situations qui déclenchent un rééchelonnement
- Changer la taille de la fenêtre
- changer la taille de la police
- Ajouter ou supprimer des éléments DOM
- Changer la position de l'élément
- Modifier la taille de l'élément
Conditions qui déclenchent un redessin
- Modifier la couleur d'arrière-plan de l'élément
- Modifier la couleur du texte
- Ajouter une ombre ou un contour
exemple de code
Voici un exemple de code simple qui montre comment déclencher la redistribution et repeindre en modifiant le style d'un élément :
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="changeStyle()">改变样式</button>
<script>
function changeStyle() {
var box = document.querySelector('.box');
box.style.width = '200px'; // 触发重排和重绘
box.style.backgroundColor = 'blue'; // 仅触发重绘
}
</script>
</body>
</html>
Il existe cinq méthodes d'optimisation du réarrangement :
- Combinez plusieurs opérations de modification des attributs de style en une seule opération pour réduire l'accès au DOM.
- Si vous souhaitez ajouter du DOM par lots, vous pouvez d'abord supprimer les éléments du flux de documents, puis les importer dans le flux de documents une fois l'opération terminée. Cela ne déclenchera qu'une seule redistribution. (Application de l'élément fragment)
- Pour les éléments qui doivent être redistribués plusieurs fois, définissez l'attribut position sur absolu ou fixe, afin que l'élément soit hors du flux de documents et que ses modifications n'affectent pas les autres éléments. Par exemple, il est préférable de définir les éléments avec des effets animés sur un positionnement absolu.
- Étant donné que les éléments avec un attribut d'affichage nul ne sont pas dans l'arbre de rendu, les opérations sur les éléments masqués n'entraîneront pas le réarrangement des autres éléments. Si vous souhaitez effectuer des opérations complexes sur un élément, vous pouvez d'abord le masquer, puis l'afficher une fois l'opération terminée. Cela ne déclenche que deux refusions lors du masquage et de l'affichage.
- Utilisez le nœud plusieurs fois en mémoire et ajoutez-le au document une fois terminé. Par exemple, vous souhaitez obtenir des données de table de manière asynchrone et les afficher sur la page. Vous pouvez d'abord obtenir les données, puis créer le fragment HTML de la table entière en mémoire, puis l'ajouter au document en une seule fois, au lieu d'ajouter chaque ligne dans une boucle.
en conclusion
La redistribution et le redessinage sont des problèmes sur lesquels il faut se concentrer lors de l'optimisation des performances des pages Web. Une mise en page et une conception de style raisonnables peuvent réduire les redistributions et les redessinements inutiles et améliorer les performances de rendu et l'expérience utilisateur des pages Web. En comprenant les conditions de déclenchement et en optimisant correctement le code, vous pouvez réduire efficacement le nombre de refusions et de redessins et améliorer les performances de la page Web.
J'espère que cet article pourra aider les lecteurs à mieux comprendre les concepts de redistribution et de redessiner et à les appliquer dans le développement réel.