Redraws et reflows fréquents : pourquoi faut-il les éviter ?

Redessiner et refusionner : pourquoi éviter que cela n'arrive trop souvent ?

Dans le développement front-end, on entend souvent deux concepts : redraw et reflow. Ils font référence aux deux processus clés lorsque le navigateur affiche la page. Le redessin fait référence au processus lorsque l'apparence d'un élément change et que l'affichage doit être mis à jour ; la redistribution fait référence au processus lorsque les propriétés géométriques de l'élément changent et que la disposition doit être recalculée et redessinée.

Le redessinage et la redistribution sont des opérations très gourmandes en performances. Des occurrences fréquentes entraîneront une dégradation des performances des pages, voire provoqueront des blocages et un chargement lent des pages. Par conséquent, nous devons faire de notre mieux pour éviter les redessins et les redistributions fréquents pendant le développement. Examinons ensuite quelques situations courantes qui conduisent à des redessins et des redistributions, et comment les éviter.

1. Évitez de modifier fréquemment les styles des éléments DOM

Lorsque nous modifions fréquemment les styles des éléments DOM, le navigateur déclenchera fréquemment des redessins et des redistributions. Par conséquent, lors de la modification du style des éléments DOM, il est préférable de fusionner les opérations de modification et d'implémenter le changement de style en modifiant le nom de classe de l'élément, ce qui peut réduire le nombre de redessins et de redistributions.

// 不推荐写法
var element = document.getElementById('example');
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 推荐写法
var element = document.getElementById('example');
element.classList.add('active');

2. Utilisez l'attribut de transformation au lieu des attributs haut/gauche

Lorsque vous utilisez les attributs haut/gauche pour modifier la position d'un élément, le redessin et la redistribution seront déclenchés. L'utilisation de l'attribut transform (tel que translateX/translateY) pour modifier la position de l'élément ne déclenchera pas la redistribution, mais déclenchera uniquement le redessin. Par conséquent, il est préférable d’utiliser l’attribut transform lorsque vous devez modifier la position d’un élément.

// 不推荐写法
var element = document.getElementById('example');
element.style.left = '100px';
element.style.top = '100px';

// 推荐写法
var element = document.getElementById('example');
element.style.transform = 'translate(100px, 100px)';

3. Évitez de lire fréquemment les attributs de taille des éléments

Chaque fois que vous lisez les attributs de taille d'un élément (tels que offsetWidth, offsetHeight), la redistribution sera déclenchée, et la lecture des valeurs de ces attributs est relativement opération consommatrice de performances. Par conséquent, nous devrions essayer d’éviter de lire fréquemment les propriétés de taille des éléments. Nous pouvons mettre ces valeurs en cache ou les obtenir toutes en même temps si nécessaire.

// 不推荐写法
var element = document.getElementById('example');
var width = element.offsetWidth;
var height = element.offsetHeight;

// 推荐写法
var element = document.getElementById('example');
var rect = element.getBoundingClientRect();
var width = rect.width;
var height = rect.height;

4. Utilisez documentFragment pour optimiser les insertions de plusieurs nœuds

L'insertion de nœuds est une opération qui déclenchera la redistribution. Si vous devez insérer des nœuds plusieurs fois, il est préférable d'utiliser documentFragment pour optimiser, d'ajouter plusieurs nœuds à documentFragment, puis. à refaire Inséré en permanence dans le DOM.

// 不推荐写法
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  document.body.appendChild(element);
}

// 推荐写法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

Grâce à l'optimisation des aspects ci-dessus, nous pouvons réduire efficacement le nombre de redessins et de refusions, et améliorer les performances et l'expérience utilisateur de la page. Dans le développement réel, nous pouvons également utiliser certains outils et bibliothèques pour nous aider à détecter et optimiser les problèmes de redessin et de redistribution, tels que Chrome DevTools et les outils d'analyse des performances.

Pour résumer, le redessinage et la redistribution sont des facteurs importants qui affectent les performances des pages, et ils doivent être évités aussi fréquemment que possible lors du développement front-end. En fusionnant les modifications de style, en utilisant les attributs de transformation, en évitant la lecture fréquente des attributs de taille et en utilisant documentFragment pour optimiser plusieurs insertions de nœuds, nous pouvons optimiser efficacement les performances de la page et améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!