web-dev-qa-db-fra.com

Est-ce que shadow DOM est rapide comme Virtual DOM dans React.js?

L'implémentation de DOM Shadow dans mes projets les rendra-t-il plus rapides que les DOM virtuels utilisés par React?

javascriptdomweb-componentshadow-domvirtual-dom
74
Hmoo_oomH

DOM virtuel

Virtual DOM consiste à éviter les modifications inutiles du DOM, qui sont coûteuses en termes de performances, car les modifications apportées au DOM entraînent généralement un nouveau rendu de la page. Virtual DOM permet également de collecter plusieurs modifications à appliquer en même temps. Ainsi, toutes les modifications ne provoquent pas un rendu supplémentaire. Au lieu de cela, le rendu ne se produit qu'une fois après l'application d'un ensemble de modifications au DOM.

DOM Shadow

Shadow Dom consiste principalement à encapsuler la mise en œuvre. Un seul élément personnalisé peut implémenter une logique plus ou moins complexe associée à un DOM plus ou moins complexe. Une application Web entière de complexité arbitraire peut être ajoutée à une page par une importation et <body><my-app></my-app>, Mais des composants plus simples réutilisables et composables peuvent également être implémentés en tant qu'éléments personnalisés dans lesquels la représentation interne est masquée dans le DOM fantôme, comme <date-picker></date-picker>.

Encapsulation de style Le DOM Shadow consiste également à éviter que les styles ne soient appliqués par inadvertance à des éléments inimaginables, par exemple parce que la bibliothèque de composants CSS ou que vous utilisez a changé un sélecteur qui s'applique désormais à d'autres éléments utilisez les mêmes noms de classes CSS. Les styles ajoutés aux composants sont étendus à ce composant et les saignements ou insinuations de styles sont empêchés.

DOM Shadow et performance

Même si le DOM fantôme ne concerne pas les performances, il a également des implications sur les performances. Etant donné que les styles ont une portée, le navigateur peut émettre des hypothèses sur certaines modifications afin de n'affecter qu'une zone limitée de la page (le DOM ombre d'un élément personnalisé), ce qui peut limiter le rendu à la zone d'un tel composant plutôt que le rendu. la page entière.

C’est la raison pour laquelle les combinateurs CSS >>>, /deep/ Et ::shadow CSS, qui permettaient d’appliquer des styles à travers les frontières du DOM fantôme, étaient déconseillés et devaient bientôt être supprimés de = Chrome (les autres navigateurs ne les ont jamais eues autant que je sache). La simple existence de ces combinateurs empêche le type d'optimisation mentionné dans le paragraphe précédent.

Angular2 utilise les avantages des deux mondes.

Il utilise un flux de données unidirectionnel et exécute la détection des modifications sur le modèle uniquement. S'il détecte des modifications, le DOM est mis à jour en mettant à jour les liaisons et crée des directives structurelles telles que *ngFor, *ngIf, ... met à jour le DOM. Par conséquent, le DOM n'est mis à jour que lorsque le modèle a réellement changé.

Angular2 utilise le DOM fantôme (uniquement avec ViewEncapsulation.Native, Qui n'est actuellement pas le paramètre par défaut) pour utiliser les fonctionnalités d'encapsulation de style fournies par le navigateur, ou (valeur par défaut actuelle), il suffit d'émuler l'encapsulation de style en réécrivant les styles ajoutés aux composants. Les variables DOM et CSS d'ombre natives (pour les modifications de style globales dynamiques) deviennent largement disponibles.

105
Günter Zöchbauer

Non, les DOM Shadow et Virtual DOM ne sont pas liés, bien que leur nom soit similaire:

DOM virtuel: React) concept de conserver deux copies du DOM (l'original et la mise à jour) pour des raisons différentes Avant le rendu, React diffs les deux objets pour déterminer s’il convient d’appliquer une ou plusieurs mises à jour à l’arborescence DOM réelle. Cela se traduit par des performances optimisées, car nous ne mettons à jour que les parties de la vue qui l'exige, pas la totalité de l'écran.

Shadow DOM: Partie de la Web Components spec proposée par le W3C, qui permet en principe d'encapsuler des éléments DOM plus petits et CSS. styles dans un seul élément DOM:

Exemple d'élément DOM Shadow 

<video width="300" height="150" />

Toutefois, <video> encapsule en réalité les éléments suivants:

<div>
   <input type="button" style="color: blue;">Play
   <input type="button" style="color: red;">Pause
   <source src="myVideo.mp4">
</div>

Donc, en utilisant Shadow DOM, nous sommes en mesure de masquer les détails d'implémentation de notre élément Web et de ne transmettre que les informations nécessaires aux sous-éléments (c'est-à-dire height, width), qui, peut-être déroutant, cela ressemble fortement à l’idée de ReactJS de passer props aux composants.

Informations fournies via :

59
lux