0Pricing
jQuery Academy · Leçon

Optimisation des opérations de manipulation du DOM

Découvrez des techniques pour réduire les réorganisations et les repeintures du DOM, comme le détachement des éléments, la fragmentation des mises à jour du DOM et le regroupement des modifications, afin d’améliorer les performances.

Optimisation des opérations de manipulation du DOM est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Pourquoi optimiser le DOM ?

Le modèle objet du document (DOM) est la manière dont les navigateurs représentent votre page Web. Lorsque vous modifiez des éléments de la page, par exemple en en ajoutant de nouveaux ou en mettant à jour des styles, le navigateur doit traiter ces changements pour les afficher.

Des manipulations fréquentes ou non optimisées du DOM peuvent ralentir votre site et dégrader l’expérience utilisateur. Apprenons à accélérer tout cela !

Recalculs de mise en page et repeints

Chaque fois que vous modifiez la mise en page ou le style d’un élément, le navigateur peut devoir effectuer un « recalcul de mise en page » (recalculer la disposition de certaines parties de la page) ou un « repeint » (redessiner les pixels).

  • Recalcul de mise en page : se produit lorsque la taille, la position ou le contenu d’un élément change. Cette opération est coûteuse, car elle affecte d’autres éléments.
  • Repeint : se produit lorsque seule la visibilité ou la couleur d’un élément change, sans modifier sa mise en page. Cette opération est moins coûteuse qu’un recalcul de mise en page.

Notre objectif est de réduire ces opérations au minimum.

Mises à jour inefficaces du DOM

Imaginez que vous ajoutiez de nombreux éléments à une liste, un par un. Chaque ajout peut déclencher un recalcul de mise en page et un repeint, surtout si vous modifiez des styles ou des dimensions.

Cela peut passer inaperçu pour quelques changements, mais avec des centaines ou des milliers d’éléments, votre page peut devenir très lente et ne plus répondre.

Regrouper vos changements

La manière la plus efficace d’optimiser les opérations sur le DOM consiste à regrouper vos changements. Au lieu d’effectuer directement de nombreuses petites modifications individuelles sur le DOM actif, essayez de faire tous vos changements en une seule fois.

Imaginez que vous peigniez un mur : il vaut mieux appliquer une grande couche que multiplier les petites touches.

Détacher, modifier, rattacher

Une technique puissante consiste à retirer temporairement un élément du DOM, à effectuer toutes les modifications nécessaires lorsqu’il est « hors ligne », puis à le réinsérer dans le DOM.

La méthode .detach() de jQuery convient parfaitement. Elle retire l’élément tout en conservant ses données et ses gestionnaires d’événements, contrairement à .remove().

Détachement en action

Cet exemple montre comment détacher un élément, modifier plusieurs fois son contenu et son style, puis le rattacher. Cela réduit les recalculs de mise en page à un seul lors du rattachement.

$(document).ready(function() {
  // Assume this HTML exists: <ul id="myList"><li>Item A</li><li>Item B</li></ul>
  const $list = $('#myList');
  const $firstItem = $list.find('li:first');

  // Detach the element
  const $tempItem = $firstItem.detach();

  // Make multiple changes while detached
  $tempItem.text('DETACHED & MODIFIED');
  $tempItem.css('background-color', 'yellow');

  // Re-attach it to the list
  $list.append($tempItem);
});

Fragmenter les mises à jour

Lorsque vous ajoutez de nombreux éléments, les créer un par un et les ajouter directement au DOM est inefficace. Construisez plutôt tous les nouveaux éléments en mémoire, puis ajoutez-les en une seule fois.

Vous pouvez procéder en construisant une chaîne HTML ou en créant un tableau d’objets jQuery, puis en utilisant un unique appel à .append().

Exemple d’ajout groupé

Cet exemple montre comment créer plusieurs éléments de liste et les ajouter en une seule opération sur le DOM à l’aide d’une chaîne HTML.

$(document).ready(function() {
  // Assume this HTML exists: <ul id="batchList"></ul>
  const $list = $('#batchList');
  let newItemsHtml = ''; // Build HTML string

  for (let i = 0; i < 5; i++) {
    newItemsHtml += `<li>New Item ${i + 1}</li>`;
  }

  // Append all new items at once
  $list.append(newItemsHtml);
});

Éviter le «&nbsp;layout thrashing&nbsp;»

Soyez prudent lorsque vous lisez des propriétés de mise en page (comme .width(), .height() et .offset()) immédiatement après avoir modifié le DOM. Le navigateur peut devoir effectuer un recalcul de mise en page pour vous fournir une valeur correcte et à jour.

Écrire à plusieurs reprises dans le DOM, puis lire les propriétés de mise en page dans une boucle, s’appelle le « layout thrashing » et dégrade fortement les performances. Regroupez vos lectures et vos écritures !

Optimiser votre code

Lesquelles des techniques suivantes permettent d’optimiser les performances de la manipulation du DOM avec jQuery ?

Récapitulatif&nbsp;: un DOM plus rapide

Excellent travail ! Vous avez appris des stratégies essentielles pour optimiser la manipulation du DOM :

  • Comprendre le coût des recalculs de mise en page et des repeints.
  • Regrouper les changements au lieu d’effectuer des mises à jour individuelles.
  • Utiliser .detach() pour modifier les éléments hors ligne.
  • Ajouter plusieurs éléments en une seule fois, souvent en construisant une chaîne HTML.
  • Éviter le « layout thrashing » en regroupant les lectures et les écritures du DOM.

La mise en pratique de ces techniques rendra vos applications jQuery bien plus réactives !

Questions Fréquemment Posées

La leçon « Optimisation des opérations de manipulation du DOM » est-elle gratuite ?

Oui — le texte complet de « Optimisation des opérations de manipulation du DOM » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Optimisation des opérations de manipulation du DOM » ?

Découvrez des techniques pour réduire les réorganisations et les repeintures du DOM, comme le détachement des éléments, la fragmentation des mises à jour du DOM et le regroupement des modifications,… Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Optimisation des opérations de manipulation du DOM » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Optimisation des opérations de manipulation du DOM
  2. Gestion efficace des événements et limitation de fréquence
  3. Exploitation de la mise en cache et des objets différés
← Retour à jQuery Academy