Améliorer les performances des pages Web : réduire le stress lié à la redistribution et au redessinage

Optimisez les performances des pages Web : réduisez la charge causée par la redistribution et le redessinage, des exemples de code spécifiques sont nécessaires

Dans l'ère actuelle de développement rapide d'Internet, les performances des sites Web sont cruciales à la fois pour l'expérience utilisateur et le classement des sites Web. Les utilisateurs s'attendent à pouvoir voir le contenu immédiatement lorsqu'ils ouvrent un site Web, plutôt que d'attendre le processus de chargement. Par conséquent, l’optimisation des performances des pages Web est devenue l’un des objectifs que tout développeur Web devrait poursuivre.

L'optimisation des performances des pages Web peut commencer par de nombreux aspects, parmi lesquels la réduction des opérations de redistribution et de repeinture est cruciale pour améliorer les performances des pages Web. La redistribution et le redessin sont des opérations de base lorsque les navigateurs affichent des pages Web, mais leur occurrence fréquente entraînera un ralentissement du rendu des pages Web, affectant ainsi l'expérience utilisateur. Cet article explique comment réduire les opérations de redistribution et de redessinage et fournit des exemples de code spécifiques.

Le concept de redistribution et de redessinage
Reflow fait référence au processus dans lequel, lorsque le navigateur affiche une page Web, il calcule la mise en page de la page Web en fonction de la taille, de la position, etc. des éléments DOM, et la redessine pour l'écran. Repeindre fait référence au processus de redessin des éléments selon le style des éléments DOM. Les opérations de redistribution et de redessinage prennent du temps, nous devons donc essayer d'éviter leur occurrence fréquente.

Comment réduire les opérations de redistribution et de redessinage

1. Utilisez les propriétés de transformation et d'opacité de CSS3
   Lorsque vous modifiez la position et la taille d'un élément, vous pouvez utiliser la propriété de transformation de CSS3 au lieu de modifier directement la gauche, le haut, la largeur et propriétés de hauteur de l'élément. Parce que l'attribut transform provoquera uniquement un redessin, pas une redistribution. De même, vous pouvez utiliser l'attribut opacity pour modifier la transparence d'un élément, ce qui provoquera uniquement un redessin.

// Exemple : Utilisez transform pour remplacer les attributs left et top
// Non recommandé :
element.style.left = '100px' ;
element.style.top = '100px' ;

element .style.transform = 'translate(100px, 100px)';

Opération éléments DOM par lots

Lorsque plusieurs éléments DOM doivent être modifiés, évitez d'utiliser plusieurs opérations simples et fusionnez-les en une seule opération par lots. Étant donné que chaque opération sur le DOM déclenchera des opérations de redistribution et de redessinage, les opérations par lots peuvent réduire le nombre d'opérations de redistribution et de redessinage et améliorer les performances.
2. 
   
// Exemple : Opération par lots d'éléments DOM

// Non recommandé :

element1.style.width = '100px';
element2.style.width = '200px';// Chaque opération déclenche un reflow et un Redraw ;

// Recommandé :
element1.style.width = '100px';

element2.style.width = '200px';

// Une seule opération ne déclenche qu'une seule redistribution et un seul redessin


Évitez l'accès fréquent aux informations de mise en page

Accès les informations de disposition des éléments DOM (tels que offsetLeft, offsetHeight, etc.) via JavaScript déclencheront le navigateur pour effectuer une opération de redistribution. Par conséquent, essayez d'éviter un accès fréquent aux informations de mise en page. Vous pouvez mettre en cache les informations de mise en page pour éviter des calculs répétés.

3. 
   // Exemple : évitez l'accès fréquent aux informations de mise en page
// Non recommandé :

const height = element.offsetHeight;

// L'accès à offsetHeight déclenchera une opération de redistribution

// Recommandé :
const height = element.offsetHeight ;

//Informations de mise en cache pour éviter les calculs répétés

Utilisez DocumentFragment

Lorsque vous utilisez JavaScript pour créer dynamiquement un grand nombre d'éléments DOM, vous pouvez utiliser DocumentFragment pour réduire les opérations de redistribution et de redessinage. DocumentFragment est un fragment de document léger qui peut être utilisé hors ligne et finalement inséré dans le document pour réduire la charge de rendu du navigateur.

4. 
   // Exemple : Utilisation de DocumentFragment
// Non recommandé :

for (let i = 0; i const element = document.createElement('div');
document.body.appendChild (element);
}
// Chaque fois qu'un élément est inséré, la redistribution et le redessin seront déclenchés

// Recommandé :
const fragment = document.createDocumentFragment();for (let i = 0; i const element = document.createElement('div');
fragment.appendChild(element);
}
document.body.appendChild(fragment);
// Insère tous les éléments en même temps, déclenchant une seule redistribution et dessin de redistribution

Résumé
En réduisant les opérations de redistribution et de redessinage, nous pouvons considérablement améliorer les performances des pages Web et améliorer l'expérience utilisateur. Cet article décrit plusieurs façons de réduire les opérations de redistribution et de redessinage et fournit des exemples de code spécifiques. J'espère que ces méthodes vous aideront à optimiser les performances des pages Web. N'oubliez pas de déterminer si chaque opération entraînera une redistribution et un redessinage. En optimisant le code et en réduisant les opérations inutiles, votre page Web sera plus fluide et plus rapide.

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!