Optimisation des performances lors de la manipulation du DOM : Meilleures Pratiques pour un Code Efficace

publié le : 12-12-2024 par    leonel yimga

L'optimisation du DOM (Document Object Model) est cruciale pour améliorer les performances des applications web. Un DOM bien optimisé peut réduire les temps de chargement, améliorer l'interactivité et offrir une meilleure expérience utilisateur. Voici quelques meilleures pratiques pour optimiser le DOM, illustrées par des exemples concrets.

Utiliser des sélecteurs au lieu de sélections imbriquées avec queryselector

L'utilisation de sélecteurs CSS pour cibler des éléments spécifiques peut être plus performante que l'utilisation d'éléments imbriqués. Les sélecteurs CSS sont souvent plus rapides et plus lisibles.

Avant :

const element = document.querySelector("section > div > #first-part");

Après :

const element = document.querySelector("#first-part");

Éviter les manipulations du DOM à l'intérieur des boucles

Les manipulations du DOM à l'intérieur des boucles peuvent entraîner des reflows et des repaints coûteux. Il est préférable de minimiser ces opérations en manipulant le DOM en dehors des boucles.

Avant :

for (let i = 0; i < 100; i++) {
  const div = document.createElement("div");
  div.textContent = `Item ${i}`;
  document.body.appendChild(div);
}

Après :

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement("div");
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

Utiliser des classes au Lieu de styles inline avec JavaScript

Les styles inline peuvent rendre le code plus difficile à maintenir et moins performant. Utiliser des classes CSS permet de centraliser les styles et d'améliorer les performances.

Avant :

const div = document.createElement("div");
div.style.color = "red";
div.style.fontSize = "16px";
div.textContent = "Texte";
document.body.appendChild(div);

Après :

const div = document.createElement("div");
div.classList.add("text-style");
div.textContent = "Texte";
document.body.appendChild(div);

Grouper toutes les propriétés de style en un bloc avant de les ajouter au DOM ou de les mettre à Jour

Regrouper les modifications de style en un seul bloc peut réduire le nombre de reflows et de repaints, améliorant ainsi les performances.

Avant :

const element = document.createElement("div");
element.style.color = "red";
element.style.fontSize = "16px";
element.style.margin = "10px";
document.body.appendChild(element);

Après :

const element = document.createElement("div");
element.style.cssText = "color: red; font-size: 16px; margin: 10px;";
document.body.appendChild(element);

Utiliser DOMContentLoaded

L'événement DOMContentLoaded permet d'exécuter du code JavaScript dès que le DOM est complètement chargé, sans attendre le chargement des ressources externes comme les images.

document.addEventListener("DOMContentLoaded", function () {
  // Code à exécuter lorsque le DOM est chargé
});

Mettre en cache les éléments Sélectionnés

La mise en cache des éléments sélectionnés peut réduire le nombre de recherches dans le DOM, améliorant ainsi les performances.

Avant :

document.querySelector(".my-element").style.color = "red";
document.querySelector(".my-element").style.fontSize = "16px";

Après :

const myElement = document.querySelector(".my-element");
myElement.style.color = "red";
myElement.style.fontSize = "16px";

Écrire des écouteurs d'événements lisibles

Les écouteurs d'événements doivent être clairs et concis pour faciliter la maintenance et la compréhension du code.

Avant :

element.addEventListener("click", function (event) {
  // Code complexe et difficile à lire
});

Après :

element.addEventListener("click", handleClick);
 
function handleClick(event) {
  // Code clair et structuré
}

Attacher les événements du DOM au parent des enfants au lieu de tous les enfants

Attacher un écouteur d'événements à un élément parent peut être plus performant que d'attacher des écouteurs à chaque enfant. Cela réduit le nombre d'écouteurs et améliore les performances.

Avant :

const children = document.querySelectorAll(".child");
children.forEach((child) => {
  child.addEventListener("click", handleClick);
});

Après :

const parent = document.querySelector(".parent");
parent.addEventListener("click", function (event) {
  if (event.target.classList.contains("child")) {
    handleClick(event);
  }
});

En suivant ces meilleures pratiques, vous pouvez améliorer considérablement les performances de votre application web et offrir une meilleure expérience utilisateur.