Pour améliorer les performances dynamiques de la page Web, les opérations DOM doivent être optimisées pour réduire le réarrangement et le redémarrage. 1. évitez le fonctionnement direct de DOM dans les boucles et l'insertion par lots doit être utilisée avec DocumentFragment; 2. Résultats de la requête Cache Dom, prioritaire à l'utilisation de sélecteurs efficaces tels que GetElementByid et limiter la portée de la requête; 3. Utiliser la délégation d'événements pour lier l'événement à écouter l'élément parent pour réduire la consommation de mémoire; 4. Séparez les opérations de lecture et d'écriture pour éviter la gigue de mise en page causée par la disposition synchrone forcée; 5. L'animation priorise la transformation et l'opacité de CSS, en utilisant l'accélération GPU sans déclencher un réarrangement; 6. Traitement de blocs Lorsqu'un grand nombre de mises à jour DOM, relachez le thread principal via setTimeout ou DequedIdleCallback pour maintenir la réponse de l'interface. En minimisant l'interaction DOM et en suivant le mécanisme de rendu du navigateur, les performances de l'application peuvent être considérablement améliorées et une expérience utilisateur fluide peut être assurée.

Lors de la création d'applications Web dynamiques, la manipulation DOM est souvent un goulot d'étranglement pour les performances. Même les petites inefficacités peuvent conduire à Jank, à un rendu lent et à une mauvaise expérience utilisateur, en particulier sur les appareils bas de gamme. Optimiser comment et quand vous interagissez avec le DOM est essentiel pour les applications haute performance. Voici comment faire les choses correctement.

Minimiser la manipulation directe DOM

Chaque fois que vous accédez ou modifiez le DOM, le navigateur peut avoir besoin de reccalculer les styles et de refloquer la mise en page. Des opérations fréquentes ou sans détriment aggravent ce co?t.

Au lieu de mettre à jour le DOM dans une boucle:

 // mauvais: les déclencheurs reflètent plusieurs fois
pour (soit i = 0; i <items.length; i) {
  const el = document.CreateElement (&#39;li&#39;);
  el.TextContent = items [i];
  list.ApendChild (EL); // refléte sur chaque annexe
}

Lancez vos modifications:

 // bon: une reflux à la fin
const fragment = document.CreateDocumentFragment ();
pour (soit i = 0; i <items.length; i) {
  const el = document.CreateElement (&#39;li&#39;);
  el.TextContent = items [i];
  fragment.ApendChild (EL);
}
List.ApendChild (fragment); // refusion unique

Utilisez DocumentFragment pour créer du contenu OFF-DOM, puis insérez-le une fois.

Utiliser une interrogation DOM efficace

évitez d'interroger les mêmes éléments à plusieurs reprises. Références de cache lorsque cela est possible.

 // mauvais: interrogatoire répété
fonction updateItems () {
  document.getElementById ('list'). style.color = 'bleu';
  document.getElementById ('list'). textContent = 'Updated';
}

// bon: cache l'élément
const Listel = document.getElementById (?liste?);
fonction updateItems () {
  listel.style.color = 'bleu';
  listEl.TextContent = 'Updated';
}

Préférez querySelector uniquement lorsque cela est nécessaire. Pour des sélections simples (par exemple, ID, Class, Tag), des méthodes intégrées comme getElementById , getElementsByClassName ou getElementsByTagName sont plus rapides et renvoient des collections en direct ou statiques plus efficacement.

Aussi, restreignez votre portée:

 // mieux: limiter la recherche dans un conteneur connu
const Container = document.getElementById (?conteneur?);
const Buttons = contener.QuerySelectorall ('. BTN');

Tire de l'effet de délégation des événements

Au lieu d'attacher des auditeurs d'événements à de nombreux éléments individuels, joignez un seul auditeur à un parent et utilisez des événements bubbleing.

 // mauvais: de nombreux auditeurs
document.QuerySelectorall ('. Item'). foreach (item => {
  item.addeventListener ('click', handleItemClick);
});

// bon: un auditeur
list.addeventListener ('click', (e) => {
  if (e.target.classList.contains ('item')) {
    HandleItemClick (E);
  }
});

Cela réduit l'utilisation de la mémoire et améliore les performances, en particulier avec des listes dynamiques ou grandes.

évitez les dispositions synchrones forcées (mise en page)

Les propriétés de mise en page de lecture (comme offsetHeight , getBoundingClientRect() ) force le navigateur à synchroniser l'arbre de rendu. S'il est suivi d'une écriture, il peut déclencher des reflux inutiles.

 // Bad: Forces Reflow sur chaque itération
pour (soit i = 0; i <items.length; i) {
  const height = items [i] .offSetheight; // Lire
  items [i] .style.transform = `traductiony ($ {height} px)`; // écrire
}

Au lieu de cela, des lectures et des écritures séparées :

 // bon: le lot se lit d'abord, puis écrit
const heights = [];
pour (soit i = 0; i <items.length; i) {
  height.push (items [i] .offsetheight); // Lisez tout d&#39;abord
}
pour (soit i = 0; i <items.length; i) {
  items [i] .style.transform = `traductiony ($ {heights [i]} px)`; // alors écrivez
}

Cela empêche le navigateur de reccalculer la disposition à plusieurs reprises.

Utilisez les transformations CSS et l'opacité pour les animations

Pour les animations, évitez de changer les propriétés de déclenchement de mise en page comme top , left ou width . Celles-ci provoquent la reflux et la repeinte.

Au lieu de cela, utilisez transform et opacity , que le navigateur peut gérer sur le fil du compositeur (souvent accéléré par le GPU):

 / * Préféré pour les performances * /
.animation {
  Transition: transformer 0,3 s, opacité 0,3S;
}
.animated.slide {
  Transform: Translatex (100px);
}

Il en résulte des animations lisses avec un minimum de travail de fil principal.

Mettre à jour Dom en morceaux pour de grands changements

Lorsque vous traitez des milliers d'éléments, évitez de bloquer le fil principal. Utilisez requestIdleCallback ou setTimeout pour donner un contr?le et maintenir l'interface utilisateur réactive.

 fonction updateLareList (éléments, rappel) {
  const chunkSize = 100;
  Soit index = 0;

  fonction processChunk () {
    const undIndex = math.min (index chunkSize, items.length);
    pour (; index <endIndex; index) {
      const el = document.CreateElement (&#39;li&#39;);
      el.textContent = items [index];
      list.ApendChild (EL);
    }

    if (index <items.length) {
      // Rendement au fil principal
      setTimeout (processChunk, 0);
    } autre {
      callback ();
    }
  }

  processChunk ();
}

Cela maintient l'interface utilisable lors de lourdes mises à jour.

L'optimisation de la manipulation de Dom ne consiste pas à faire moins - il s'agit de le faire plus intelligent. En lotant les mises à jour, en minimisant les reflux, en utilisant des sélecteurs efficaces et en tirant parti des internes du navigateur, vous pouvez améliorer considérablement les performances. La clé est de travailler avec le navigateur, pas contre.

Fondamentalement: touchez le DOM le moins possible et faites en sorte que ces touches comptent .

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!