Introduction

Ce cours couvre les aspects essentiels de l'analyse des performances et de l'optimisation du code JavaScript. Vous apprendrez à analyser les performances, profiler votre code, et appliquer des techniques d'optimisation pour rendre vos applications web plus rapides et réactives.

Partie 1: Analyse de Performance

Pourquoi Analyser les Performances ?

Analyser les performances permet d'identifier les goulots d'étranglement et les inefficacités dans votre application, assurant ainsi une expérience utilisateur fluide et rapide.

Outils d'Analyse

  • Google Lighthouse : Un outil intégré dans Chrome DevTools pour auditer les performances des pages web.
  • WebPageTest : Un service en ligne pour mesurer les performances de chargement des pages web. 

Exemple avec Google Lighthouse

  1. Ouvrez votre page web dans Google Chrome.
  2. Accédez aux DevTools (F12 ou Ctrl+Shift+I).
  3. Allez dans l'onglet "Lighthouse".
  4. Cliquez sur "Generate report".

Explication : Google Lighthouse génère un rapport détaillé incluant les performances, l'accessibilité, les meilleures pratiques et le SEO, fournissant des suggestions d'amélioration.

Partie 2: Profiling de JavaScript

Pourquoi Profiler le Code JavaScript ?

Le profiling permet de comprendre comment le code s'exécute, identifiant les fonctions les plus coûteuses en termes de temps d'exécution et les goulots d'étranglement dans le code.

Outils de Profiling

  • Chrome DevTools : Offre des fonctionnalités robustes pour le profiling du JavaScript.
  • Node.js Profiler : Pour les applications Node.js, utilise --inspect et --prof pour le profiling côté serveur.

Exemple de Profiling avec Chrome DevTools

  1. Ouvrez votre page web dans Google Chrome.
  2. Accédez aux DevTools (F12 ou Ctrl+Shift+I).
  3. Allez dans l'onglet "Performance".
  4. Cliquez sur "Record" et interagissez avec votre application.
  5. Arrêtez l'enregistrement pour voir les résultats.

Explication : L'onglet "Performance" vous montre une chronologie des activités de votre application, y compris les scripts, le rendu, et les événements, aidant à identifier les parties du code à optimiser.

Partie 3: Techniques d'Optimisation de Code

Optimisation du DOM

  • Minimiser les accès au DOM : Réduire les manipulations directes du DOM pour éviter les reflows et repaints coûteux.

    • Minimiser les accès directs au DOM est une technique essentielle pour améliorer les performances des applications web. Les manipulations fréquentes du DOM peuvent entraîner des reflows (recalcul de la disposition) et des repaints (redessiner les parties visibles de la page), qui sont coûteux en termes de performance. Voici des exemples illustrant cette pratique.

      Exemple 1 : Utiliser des DocumentFragment

      Problème : Ajouter plusieurs éléments directement au DOM.

      const list = document.getElementById("list");
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i + 1}`;
  list.appendChild(li); // Manipulation directe du DOM
}

      Solution : Utiliser un DocumentFragment pour minimiser les reflows et repaints.

      const list = document.getElementById("list");
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i + 1}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // Une seule manipulation du DOM

      Explication : En utilisant un DocumentFragment, les modifications sont faites en mémoire avant d'être ajoutées au DOM en une seule opération, ce qui réduit le nombre de reflows et repaints.

      Exemple 2 : Cacher les Éléments pendant les Modifications

      Problème : Modifier plusieurs éléments visibles.

      const list = document.getElementById("list");
const items = list.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
  items[i].textContent = `Updated Item ${i + 1}`; // Manipulation directe du DOM visible
}

      Solution : Cacher les éléments avant de les modifier, puis les afficher à nouveau.

      const list = document.getElementById("list");
list.style.display = "none"; // Cache la liste pour éviter les reflows/repaints
const items = list.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
  items[i].textContent = `Updated Item ${i + 1}`;
}
list.style.display = ""; // Affiche la liste après les modifications

      Explication : En cachant temporairement les éléments pendant les modifications, les reflows et repaints sont minimisés car le navigateur n'a pas besoin de redessiner la page à chaque changement.

      Conclusion

      Minimiser les accès au DOM est crucial pour améliorer les performances des applications web. Utiliser des DocumentFragment pour les modifications multiples et cacher les éléments pendant les mises à jour sont des techniques efficaces pour réduire les coûts liés aux reflows et repaints, garantissant ainsi une expérience utilisateur plus fluide et réactive.

  • Utiliser des DocumentFragments : Pour effectuer des opérations DOM en mémoire avant de les appliquer.

    • L'utilisation de DocumentFragment permet d'effectuer des opérations DOM en mémoire avant de les appliquer, ce qui réduit le nombre de reflows et repaints, améliorant ainsi les performances.

      Exemple 1 : Ajouter Plusieurs Éléments

      Problème : Ajouter des éléments directement au DOM.

      const list = document.getElementById("list");
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i + 1}`;
  list.appendChild(li); // Plusieurs manipulations du DOM
}

      Solution : Utiliser DocumentFragment.

      const list = document.getElementById("list");
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i + 1}`;
  fragment.appendChild(li); // Manipulations en mémoire
}
list.appendChild(fragment); // Une seule manipulation du DOM

      Explication : En utilisant DocumentFragment, vous effectuez toutes les modifications en mémoire avant de les appliquer au DOM. Cela réduit les reflows et repaints, car le DOM n'est mis à jour qu'une seule fois à la fin.

      Exemple 2 : Mise à Jour des Éléments Existants

      Problème : Mettre à jour des éléments directement dans le DOM.

      const list = document.getElementById("list");
const items = list.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
  items[i].textContent = `Updated Item ${i + 1}`; // Plusieurs manipulations du DOM
}

      Solution : Utiliser DocumentFragment.

      const list = document.getElementById("list");
const fragment = document.createDocumentFragment();
const items = list.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
  const newLi = document.createElement("li");
  newLi.textContent = `Updated Item ${i + 1}`;
  fragment.appendChild(newLi);
}
list.innerHTML = ''; // Efface les éléments existants
list.appendChild(fragment); // Une seule manipulation du DOM

      Explication : En utilisant DocumentFragment pour mettre à jour les éléments, vous minimisez les manipulations directes du DOM. Les nouveaux éléments sont créés en mémoire et ajoutés au DOM en une seule opération, réduisant ainsi les reflows et repaints.

      Conclusion

      L'utilisation de DocumentFragment pour les opérations DOM permet de réduire les manipulations directes du DOM, optimisant ainsi les performances de votre application en limitant les reflows et repaints coûteux.

Au tres Exemples d'optimisation :

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

Optimisation des Boucles

  • Utiliser des boucles optimisées : Préférer les boucles for simples aux méthodes de tableau comme forEach pour les grandes itérations.

Exemple :

for (let i = 0; i < items.length; i++) {
  process(items[i]);
}

Optimisation de la Mémoire

  • Éviter les fuites de mémoire (memory leak): Utiliser des références faibles et s'assurer de nettoyer les objets inutilisés.

Exemple :

 

let element = document.getElementById('myElement');
element.addEventListener('click', function() {
  console.log('Clicked');
});
// Assurez-vous de supprimer les écouteurs quand ils ne sont plus nécessaires
element.removeEventListener('click', handler);

Conclusion

Maîtriser l'analyse de performances, le profiling de JavaScript, et les techniques d'optimisation est essentiel pour développer des applications web rapides et réactives. En utilisant les outils et techniques appropriés, vous pouvez identifier les goulots d'étranglement et améliorer l'efficacité de votre code, offrant ainsi une meilleure expérience utilisateur.

 
Modifié le: vendredi 17 mai 2024, 09:05