Réduire le nombre de redessins et de redistributions de pages Web : moyens d'optimiser les performances des pages Web

Optimiser les performances des pages Web : Comment réduire le nombre de redraws et de reflows ?

Avec le développement d'Internet, l'optimisation des performances des pages Web est devenue l'une des questions importantes auxquelles les développeurs prêtent attention. Pendant le processus de chargement des pages Web, le redessinage et la redistribution sont les deux principaux facteurs affectant les performances. Cet article explique comment réduire le nombre de redessins et de redistributions, et fournit quelques exemples de code concrets.

1. Utilisez les propriétés CSS appropriées

Lors de l'écriture du code CSS, vous devez essayer d'éviter d'utiliser des propriétés qui provoquent un redessin et une redistribution. Par exemple, vous pouvez définir des attributs de style qui changent fréquemment pour une classe, puis utiliser JavaScript pour changer de classe au lieu de modifier directement le style de l'élément. Cela réduit le nombre de redessins et de refusions.

Exemple :

<div id="myElement" class="red"></div>

<script>
  var element = document.getElementById('myElement');
  element.classList.toggle('red');
</script>

2. Utiliser la délégation d'événements

Lors de la gestion des événements, essayez d'utiliser la délégation d'événements pour réduire le nombre de liaisons d'événements. Liez l'événement à l'élément parent, puis gérez-le en conséquence en fonction de la cible de l'événement. Cela peut éviter un grand nombre de liaisons d'événements et réduire le nombre de redistributions.

Exemple :

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  var list = document.getElementById('myList');
  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log('You clicked on:', event.target.textContent);
    }
  });
</script>

3. Modification par lots du DOM

Lorsque vous devez modifier des éléments DOM plusieurs fois, vous devez essayer d'utiliser DocumentFragment ou de supprimer des éléments DOM du flux de documents, puis de les insérer une fois la modification terminée. Cela évite les processus de refusion fréquents et améliore les performances.

Exemple :

var fragment = document.createDocumentFragment();

for (var i = 0; i < 1000; i++) {
  var element = document.createElement('div');
  element.textContent = 'Item ' + i;
  fragment.appendChild(element);
}

document.body.appendChild(fragment);

4. Utilisez l'animation CSS au lieu de l'animation JavaScript

Lorsque vous devez animer des éléments, essayez d'utiliser l'animation CSS au lieu de l'animation JavaScript. Les animations CSS utilisent l'accélération GPU pour de meilleures performances et peuvent réduire le nombre de redessins et de redistributions.

Exemple :

<div id="myElement"></div>

<style>
  #myElement {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s;
  }

  #myElement:hover {
    width: 200px;
  }
</style>

5. Utilisez la fonction de limitation ou la fonction anti-secousse

Lorsque des événements sont déclenchés fréquemment, vous pouvez utiliser la fonction de limitation ou la fonction anti-secousse pour contrôler la fréquence de déclenchement des événements et réduire le nombre de refusions. La fonction de limitation exécute la fonction périodiquement, tandis que la fonction anti-rebond exécute la fonction quelque temps après le dernier déclenchement.

Exemple :

function throttle(func, delay) {
  var timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

function debounce(func, delay) {
  var timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      func.apply(this, arguments);
    }, delay);
  };
}

// 使用节流函数
window.addEventListener('scroll', throttle(function() {
  console.log('Scroll event');
}, 200));

// 使用防抖函数
window.addEventListener('resize', debounce(function() {
  console.log('Resize event');
}, 200));

En optimisant les performances des pages Web et en réduisant le nombre de redessins et de redistributions, vous pouvez améliorer la vitesse de chargement des pages Web et l'expérience utilisateur. Vous trouverez ci-dessus quelques méthodes d'optimisation et exemples de code couramment utilisés. J'espère qu'ils vous seront utiles dans votre travail. N'oubliez pas que continuer à vous concentrer sur l'optimisation des performances des pages Web est un processus d'apprentissage et d'amélioration continus.

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!