javascript - Pourquoi le DOM virtuel réagit-il plus efficacement que le DOM fonctionnant directement?

Question

Il existe un concept de DOM virtuel dans React
La différence entre celui-ci et le fonctionnement natif du DOM est que JS est utilisé pour générer un DOM virtuel similaire à un intermédiaire
Il s'agit d'un DOM implémenté à l'aide de JS. Il enregistre certains enregistrements avant et après. le changement, puis re- Lors du rendu, effectuez un rendu local des parties différenciées. Cela évite le rendu de la page entière ? Donc, l'opération native du DOM est de restituer la page entière ? Je vois de nombreux exemples sur Internet qui disent qu'à chaque fois que le natif change, le innerHTML est directement réinitialisé si une grande quantité de données est utilisée dans cette opération, ce sera GG, ha ? Virtual DOM enregistre les modifications, puis utilise son algorithme de comparaison pour optimiser et enfin restitue localement là où il y a des modifications. Je ne peux donc pas obtenir le même effet en utilisant le mode natif ? Puis-je également trouver les modifications par comparaison, puis utiliser l'algorithme diff pour modifier innerHTML à l'emplacement spécifié ? Cette efficacité sera-t-elle pire que celle du domaine virtuel ? Résoudre

Answer 1

Je crois comprendre que vous pouvez le faire plus rapidement que React si vous pouvez faire deux choses :

1. Évitez les nouveaux rendus inutiles.

2. Ayez un meilleur algorithme de comparaison !

Veuillez consulterstackoverflow上virtual domla réponse de l'auteur pour plus de détails.

Answer 2

est comme ceci :
Tout d'abord, le dom virtuel n'est pas plus rapide que l'opération native directe. Le soi-disant « rapide » est conditionnel
Par exemple, j'aime, nombres +1, opération directe. du dom sera plus rapide.
Si vous pouvez comprendre les règles vous-même et que chaque fois que vous utilisez manuellement le dom, vous ne modifiez que ce qui doit être changé, alors l'opération du dom sera toujours plus rapide que celle du dom virtuel.
Mais si vos modifications sont liées à Beaucoup, et que vous devez conserver le statut, alors la différence automatique du dom virtuel vous évitera sans aucun doute plus de soucis
Par exemple, une liste, les éléments de la liste. avoir des statuts tels que les likes, le nombre de réponses et d'autres informations, il y a de nouveaux ajouts dynamiques, il y a un chargement dynamique, il vous sera très fastidieux d'exploiter directement le dom en ce moment
Le noyau du virtuel. dom est diff. Il vous aide automatiquement à calculer les zones qui doivent être ajustées, puis modifie uniquement les zones qui doivent être modifiées. Ce qui est enregistré n'est pas la vitesse de fonctionnement, mais la "vitesse globale" telle que la vitesse de développement/vitesse de maintenance. /concision logique
Bien sûr, le dom virtuel a aussi des défauts, que je n'aborderai pas ici

Answer 3

Si vous consacrez beaucoup d'efforts à optimiser chaque modification du DOM sur chaque page, vous serez certainement plus rapide que le DOM virtuel automatisé
Le problème est que vous ne le ferez pas dans des circonstances normales ;
Donc, dans la plupart des cas, le DOM vitruel peut fournir des fonctionnalités plus puissantes (telles que le rendu des contrôles sur le canevas) dans des conditions plus rapides.

Answer 4

Visual DOM n'est pas plus rapide que de manipuler directement le DOM (à condition que le code que vous écrivez soit suffisamment bon), il apparaît à cause du mécanisme de re-rendu de React. C'est-à-dire que pour React, tout changement nécessite de restituer l'intégralité de l'application. S'il s'agit d'un vrai DOM, de telles performances sont inacceptables.

Vous pouvez consulter la réponse de Youda pour plus de détails

Answer 5

(Utilisez VDOM diff pour mettre à jour sélectivement le DOM) (généralement) plus rapidement que (reconstruire le DOM à chaque fois)

L'algorithme de comparaison sacrifie généralement la qualité afin de réduire la complexité temporelle et n'est pas garanti de donner la différence minimale. Il devrait alors être possible de construire plusieurs VDOM afin que le résultat de la différence soit de reconstruire le DOM. Dans ce cas, les VDOM peuvent être plus lents.