Pourquoi la manipulation de Dom est-elle lente et comment peut-elle être optimisée?

Les principales raisons du ralentissement du fonctionnement du DOM sont le coût élevé du réarrangement et l'efficacité à faible accès. Les méthodes d'optimisation incluent: 1. Réduire le nombre d'accès et les valeurs de lecture du cache; 2. Opérations de lecture et d'écriture par lots; 3. Fusion des modifications, utilisez des fragments de document ou des éléments cachés; 4. Évitez la gigue de mise en page et manipulez de manière centralisée lire et écrire; 5. Utilisez le cadre ou la demande de requête Frame pour mettre à jour de manière asynchrone.

L'exploitation directe du DOM est en effet facile à ralentir, en particulier lorsque des mises à jour fréquentes ou le traitement de grands nœuds. Il y a deux raisons principales: la première est que le Dom lui-même est une structure de données indépendante et est géré séparément du moteur JavaScript; L'autre est que chaque modification peut déclencher la reflux (repeindre) du navigateur et la repeinte (repeindre) et ces opérations sont très coûteuses.

Pour optimiser les opérations DOM, la clé consiste à réduire le nombre de visites, à fusionner les actions de modification et à éviter les dispositions synchrones forcées.

Réduire le nombre de visites DOM

Les opérations DOM sont beaucoup plus lentes que les opérations variables JS ordinaires, en particulier lorsque la lecture des attributs tels que offsetWidth ou getBoundingClientRect() . Ce type d'opération "Read" oblige le navigateur à calculer immédiatement le style, ce qui entraîne une disposition synchrone forcée.

Pratiques suggérées:

• Cache les valeurs qui doivent être lues plusieurs fois et ne sont lues qu'une seule fois.
• Essayez de sauver l'état avec des variables en JS, plutôt que de l'obtenir à plusieurs reprises du DOM.
• Lire et écriture par lots: Lisez d'abord toutes les données, puis effectuez un traitement logique et écrivez enfin au DOM uniformément.

Par exemple:

 const elements = document.QuerySelectorall ('. item');
Soit totalHeight = 0;

Elements.ForEach (el => {
  TotalHeight = El.offsetheight; // ne lis qu'une seule fois});

Fusionner les modifications DOM pour éviter un réarrangement fréquent

Chaque fois que le DOM est modifié, une réorganisation peut déclencher. S'il est modifié cinq fois d'affilée, le navigateur peut effectuer cinq rénovations. Mais en réalité, nous n'avons besoin que du dernier résultat.

Méthode d'optimisation:

• Utilisez un fragment de document (documentFragment) aux nœuds d'insertion par lots.
• Cachez l'élément, puis fonctionnez-le et affichez-le après l'achèvement.
• Utilisez Virtual Dom ou Frameworks (tels que React) pour effectuer automatiquement des mises à jour différentielles.

Par exemple:

 const fragment = document.CreateDocumentFragment ();
pour (soit i = 0; i <100; i) {
  const div = document.CreateElement (&#39;div&#39;);
  div.textContent = &#39;item&#39; i;
  fragment.ApendChild (div);
}
document.body.ApendChild (fragment); // La réorganisation n&#39;est déclenchée qu&#39;une seule fois

Évitez la gigue de mise en page (mise en page)

La soi-disant la gigue de mise en page est de lire et d'écrire en continu les propriétés DOM dans une boucle, ce qui fait que le navigateur a réorganisé à plusieurs reprises.

Méthodes d'écriture d'erreur courantes:

 pour (soit i = 0; i <items.length; i) {
  items [i] .style.width = contener.offsetwidth &#39;px&#39;; // réorganisation forcée de chaque lecture}

Méthode d'optimisation:

• Lisez d'abord la répartition offset et mettez-le en cache.
• Toutes les opérations d'écriture sont traitées de manière centralisée.

Utilisez des outils modernes et des stratégies de mise à jour asynchrones

La plupart des cadres frontaux ont désormais des mécanismes d'optimisation des performances intégrés, tels que la réconciliation de React et les systèmes réactifs de VUE, qui mettra à jour le DOM au bon moment au lieu de prendre effet immédiatement.

Si vous implémentez vous-même une logique similaire, vous pouvez utiliser requestAnimationFrame pour contrôler le rythme de mise à jour ou utiliser les limites anti-titres pour contrôler la fréquence de fonctionnement DOM dans les événements à haute fréquence (tels que redimensionner, défiler).

En général, le fonctionnement du DOM lent est principalement dû au coût élevé du réarrangement et de la redémarrage et de l'efficacité à faible accès. Tant que vous réalisez "moins de lecture et d'écriture, de fusionner les opérations et de retarder la mise à jour", vous pouvez améliorer efficacement les performances. Ces techniques ne sont pas nécessairement compliquées, mais elles sont très pratiques.

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!