Est shadow DOM rapide comme DOM virtuel dans React.js?
est-ce que la mise en œuvre de Shadow DOM dans mes projets les rendra plus rapides comme virtual DOM qui est utilisé par React?
3 réponses
DOM virtuel
DOM virtuel est d'éviter les changements inutiles au DOM, qui sont coûteux performance-sage, parce que les changements au DOM provoquent habituellement le re-rendu de la page. Le DOM virtuel permet également de collecter plusieurs modifications à appliquer en même temps, de sorte que chaque modification ne provoque pas un re-render, mais au contraire le re-rendering n'arrive qu'une fois qu'un ensemble de modifications a été appliqué au DOM.
"151990920 de l'Ombre" DOM
Shadow dom est principalement sur l'encapsulation de la mise en œuvre. Un seul élément personnalisé peut mettre en œuvre une logique plus ou moins complexe combinée à une 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 aussi des composants réutilisables et composables plus simples peuvent être implémentés comme des éléments personnalisés où la représentation interne est cachée dans le DOM shadow comme <date-picker></date-picker> .
style encapsulation Shadow DOM vise également à empêcher que des styles soient appliqués accidentellement à des éléments que le concepteur n'avait pas l'intention de créer, par exemple parce que la bibliothèque CSS ou components que vous utilisez a changé un sélecteur qui s'applique maintenant à d'autres éléments qui utilisent les mêmes noms de classe CSS. Styles ajoutés aux composants sont définies à ce composant et des saignements ou des styles est empêché.
Shadow DOM et de la performance
même si shadow DOM n'est pas une question de performance en premier lieu, il a également des implications de performance. Parce que les styles sont scoped, le navigateur peut faire des hypothèses sur certains changements pour affecter seulement une zone limitée de la page (le DOM ombre d'un élément personnalisé) qui peut limiter le re-rendu à la zone d'un tel composant, au lieu de re-rendu de la page entière.
C'est la raison de la >>> , /deep/ , et ::shadow CSS combinators, qui ont permis d'appliquer des styles au-delà des limites shadow DOM, ont été dépréciés et sont susceptibles d'être retirés bientôt de Chrome (d'autres navigateurs ne les ont jamais eu AFAIK). La simple existence de ces combinators empêche le type d'optimisation mentionné dans le paragraphe précédent.
Angular2 utilise les avantages des deux mondes.
il utilise le flux de données unidirectionnel et exécute la détection de changement sur le modèle. S'il détecte des changements, il fait en sorte que le DOM soit mis à jour en mettant à jour les liaisons et en faisant des directives structurelles comme *ngFor , *ngIf ,... mettez à jour le DOM. Par conséquent, le DOM n'est mis à jour que lorsque le modèle a effectivement changé.
Angular2 utilise shadow DOM (seulement avec ViewEncapsulation.Native qui n'est pas par défaut actuellement) pour utiliser les capacités d'encapsulation de style fournies par le navigateur, ou (par défaut actuel) émule simplement le style encapsulation par réécriture des styles ajoutés aux composants, comme solution de contournement jusqu'à ce que les variables natives shadow DOM et CSS (pour les changements de style globaux dynamiques) deviennent largement disponibles.
Non, Shadow DOM et Virtual DOM ne sont pas liés, bien qu'ils portent un nom quelque peu similaire:
DOM virtuel: React concept de conserver DEUX copies du DOM (l'original, et le mis à jour) pour des raisons différentes. Avant le rendu, React diffs les deux objets pour déterminer s'il doit appliquer une mise à jour à L'arbre DOM actuel. Il en résulte des performances boostées, car nous ne mettons à jour que les parties de la vue qui le nécessitent, et non l'ensemble écran.
"151990920 de l'Ombre" DOM: une Partie de la Web Components spec , comme proposé par le W3C, qui permet essentiellement à l'encapsulation de plus petits éléments du DOM et des styles CSS dans un seul élément du DOM:
Exemple l'Ombre de l'Élément DOM
<video width="300" height="150" />
Toutefois, <video> fait encapsule les éléments suivants:
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
Ainsi, en utilisant Shadow DOM, nous sommes en mesure de cacher les détails de mise en œuvre de notre élément web, et de transmettre seulement les informations nécessaires aux sous-éléments (i.e. height , width ), qui, peut-être de façon confuse, ressemble fortement à L'idiome Réactjs de passer props aux composants.
Information fournie via :
D'après cet essai, le polymère soufflé réagit dans les performances en Chrome: