Shadow DOMはReact.jsの仮想DOMのように高速ですか？

Question 1

プロジェクトにShadowDOMを実装すると、Reactで使用される仮想DOMのように高速になりますか？

Question 2

仮想DOM

仮想DOMは、DOMへの不必要な変更を回避することを目的としています。これは、通常、DOMを変更するとページが再レンダリングされるため、パフォーマンスの面でコストがかかります。仮想DOMでは、一度に適用される複数の変更を収集することもできるため、すべての変更によって再レンダリングが行われるわけではなく、一連の変更がDOMに適用された後に1回だけ再レンダリングが行われます。

ShadowDOM

Shadow domは、主に実装のカプセル化に関するものです。単一のカスタム要素は、多かれ少なかれ複雑なDOMと組み合わせて多かれ少なかれ複雑なロジックを実装できます。任意の複雑さのWebアプリケーション全体をインポートによってページに追加できます<body><my-app></my-app>が、より単純な再利用可能で構成可能なコンポーネントを、内部表現がのようにシャドウDOMに隠されているカスタム要素として実装することもできます<date-picker></date-picker>。

スタイルのカプセル化 ShadowDOMは、デザイナーが意図していなかった要素にスタイルが誤って適用されるのを防ぐことも目的としています。たとえば、使用しているCSSまたはコンポーネントライブラリが、同じCSSクラス名を使用する他の要素に適用されるセレクターを変更したためです。コンポーネントに追加されたスタイルはそのコンポーネントにスコープされ、スタイルの流出または流出が防止されます。

ShadowDOMとパフォーマンス

シャドウDOMはそもそもパフォーマンスに関するものではありませんが、パフォーマンスにも影響を及ぼします。スタイルのスコープが設定されているため、ブラウザーは、ページの限られた領域（カスタム要素のシャドウDOM）にのみ影響するいくつかの変更について想定できます。これにより、再レンダリングではなく、そのようなコンポーネントの領域に再レンダリングを制限できます。ページ全体。

これが理由です>>>、/deep/と::shadow影のDOMの境界を越えてスタイルを適用することができCSSコンビネータは、廃止され、Chromeからすぐに削除される対象となっている（他のブラウザでは、私の知る限り、それらを持っていませんでした）。これらのコンビネータが存在するだけで、前の段落で説明したような最適化が妨げられます。

Angular2は、両方の長所を利用しています。

単方向のデータフローを使用し、モデルでのみ変更検出を実行します。それが検出された場合、それはDOMが更新バインディングによって更新など構造的なディレクティブを作ることになり変化し*ngFor、*ngIf... DOMを更新します。したがって、DOMは、モデルが実際に変更されたときにのみ更新されます。

Angular2は、シャドウDOM（ViewEncapsulation.Native現在デフォルトではない）を使用して、ブラウザーが提供するスタイルカプセル化機能を利用するか、（現在のデフォルト）コンポーネントに追加されたスタイルを書き換えてスタイルカプセル化をエミュレートします。これは、ネイティブシャドウDOMおよびCSS変数までの回避策です。（動的なグローバルスタイルの変更用）が広く利用可能になります。

Question 3

いいえ、ShadowDOMとVirtualDOMは無関係ですが、名前は似ています。

仮想DOM：異なる理由でDOMの2つのコピー（元のコピーと更新されたコピー）を保持するというReactの概念。レンダリングする前に、Reactは2つのオブジェクトを比較して、実際のDOMツリーに更新を適用する必要があるかどうかを判断します。これにより、画面全体ではなく、ビューの必要な部分のみが更新されるため、パフォーマンスが向上します。

Shadow DOM： W3Cによって提案されたWebコンポーネント仕様の一部であり、基本的に、より小さなDOM要素とCSSスタイルを単一のDOM要素にカプセル化できます。

ShadowDOM要素の例

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

ただし、<video>実際には次の要素をカプセル化します。

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

したがって、Shadow DOMを使用することで、Web要素の実装の詳細を非表示にし、必要な情報のみをサブ要素（つまりheight、width）に渡すことができます。これは、おそらく紛らわしいことに、propsコンポーネントに渡すReactJSイディオムに非常に似ています。。

を介して提供される情報：