W3Docs

Apparence

Français

Optimisation des performances dans le développement web ​

L'optimisation des performances est cruciale dans le développement web pour garantir des applications web rapides, réactives et efficaces. Ce guide couvre des techniques pour optimiser la manipulation du DOM, comprendre et éviter le layout thrashing, regrouper les modifications du DOM, et utiliser document.createDocumentFragment() pour améliorer les performances.

Amélioration des performances ​

Techniques pour optimiser la manipulation du DOM ​

  1. Minimiser l'accès au DOM : Accéder et modifier le DOM est lent. Réduisez le nombre de fois où vous accédez au DOM en mettant en cache les références aux éléments du DOM et en minimisant les manipulations directes.
  2. Gestion efficace des événements : Déleguez les événements à un élément parent au lieu de les attacher à chaque élément enfant. Cela réduit le nombre d'écouteurs d'événements et améliore les performances.
  3. Utiliser des sélecteurs efficaces : Optimisez vos sélecteurs. Préférez getElementById ou querySelector avec des sélecteurs précis, et évitez les sélecteurs de descendants trop complexes ou profonds.
  4. Éviter les mises en page inutiles : Évitez de forcer des reflows et des repaints inutiles en minimisant les modifications de mise en page et en utilisant des classes CSS au lieu de styles en ligne pour plusieurs modifications.
  5. DOM virtuel : Envisagez d'utiliser des bibliothèques qui implémentent un DOM virtuel (comme React) pour optimiser et regrouper les modifications du DOM.

Comprendre et éviter le layout thrashing ​

Qu'est-ce que le layout thrashing ? ​

Le layout thrashing se produit lorsqu'une série d'opérations JavaScript force le navigateur à recalculer la mise en page à plusieurs reprises. Cela se produit lorsque vous lisez des données du DOM puis que vous les y écrivez rapidement, ce qui provoque de multiples reflows et repaints.

Éviter le layout thrashing ​

  1. Regrouper les opérations de lecture et d'écriture : Regroupez toutes les opérations de lecture ensemble et toutes les opérations d'écriture ensemble pour éviter le layout thrashing.
  2. Utiliser requestAnimationFrame : Planifiez les lectures et écritures du DOM à l'aide de requestAnimationFrame pour garantir qu'elles sont exécutées dans la prochaine image d'animation.

Exemple :

javascript
let width = element.offsetWidth; // Read operation
element.style.width = (width + 10) + 'px'; // Write operation

Amélioré :

javascript
requestAnimationFrame(() => {
    const width = element.offsetWidth; // Read operation
    element.style.width = (width + 10) + 'px'; // Write operation
});

Regrouper les modifications du DOM ​

Utilisation de document.createDocumentFragment() pour regrouper les modifications ​

document.createDocumentFragment() est un conteneur léger capable de contenir une partie de la structure du DOM. Les modifications apportées à un DocumentFragment n'affectent pas le DOM en direct, ce qui en fait un moyen efficace de regrouper les mises à jour du DOM.

Exemple : ​

html
<!DOCTYPE html>
<html>
<head>
    <title>Batching DOM Changes</title>
</head>
<body>
    <div id="container"></div>

    <script>
        const container = document.getElementById('container');
        const fragment = document.createDocumentFragment();

        for (let i = 0; i < 40; i++) {
            const div = document.createElement('div');
            div.textContent = `Item ${i}`;
            fragment.appendChild(div);
        }

        container.appendChild(fragment); // Batch update
    </script>
</body>
</html>
Try it Yourself »

Cet exemple montre comment créer un DocumentFragment, y ajouter plusieurs éléments, puis ajouter le fragment au DOM en une seule opération, ce qui réduit les reflows et les repaints.

Bonnes pratiques ​

  1. Reporter le JavaScript non critique : Utilisez l'attribut defer sur les balises script pour empêcher le blocage de l'analyse du DOM.
  2. Utiliser le chargement asynchrone pour les scripts : Chargez les scripts de manière asynchrone lorsque cela est possible pour éviter de bloquer le rendu.
  3. Minimiser les recalculs CSS : Réduisez la complexité de vos sélecteurs CSS et évitez les styles en ligne lorsque cela est possible.
  4. Profiler et surveiller les performances : Profitez régulièrement de votre application à l'aide des outils de développement du navigateur pour identifier et corriger les goulots d'étranglement des performances.

INFO

Minimisez le layout thrashing en regroupant toutes vos opérations de lecture du DOM ensemble, puis en effectuant toutes vos opérations d'écriture séparément. Cela réduit le nombre de reflows et de repaints, améliorant considérablement les performances.

Conclusion ​

Optimiser la manipulation du DOM et comprendre comment le navigateur gère les mises en page sont essentiels pour créer des applications web haute performance. En regroupant les modifications du DOM, en évitant le layout thrashing et en utilisant les bonnes pratiques comme document.createDocumentFragment(), vous pouvez considérablement améliorer les performances et la réactivité de vos applications web.

Pratique ​

Parmi les techniques suivantes, lesquelles sont importantes pour optimiser les performances du DOM ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.