BinaryDevelop
  1. ホーム
  2. dom

[解決済み] React.jsのVirtual DOMのようにShadow DOMは速いのか？

2023-03-05 15:38:38

質問

Shadow DOMを実装すると、Reactで使われているvirtual DOMのように高速化されるのでしょうか？

どのように解決するのですか？

仮想DOM

DOM への変更は通常ページの再レンダリングを引き起こすため、パフォーマンス的に高くつくものです。仮想 DOM はまた、一度に適用される複数の変更を収集することを可能にします。そのため、すべての変更が再レンダリングを引き起こすのではなく、一連の変更が DOM に適用された後に一度だけ再レンダリングが行われます。

シャドウ DOM

Shadow DOM は、主に実装のカプセル化についてです。単一のカスタム要素で、多かれ少なかれ複雑なDOMと組み合わせた複雑なロジックを実装することができます。任意の複雑さのウェブアプリケーション全体を、インポートおよび <body><my-app></my-app> のように内部表現をシャドウ DOM に隠蔽するカスタム要素として実装することもできます。 <date-picker></date-picker> .

スタイルのカプセル化 Shadow DOM は、たとえば、使用している CSS やコンポーネント ライブラリがセレクタを変更し、同じ CSS クラス名を使用する他の要素に適用されたために、設計者が意図していない要素に誤ってスタイルが適用されるのを防ぐことでもあります。コンポーネントに追加されたスタイルはそのコンポーネントにスコープされ、スタイルのブリードアウトまたはブリードインは防止されます。

シャドウDOMとパフォーマンス

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

このような理由で >>> , /deep/ そして ::shadow CSS コンビネーターは、シャドウ DOM 境界を越えてスタイルを適用することができましたが、非推奨となり、Chrome からすぐに削除される予定です（他のブラウザでは AFAIK はそれらを持ちませんでした）。これらの組み合わせ要素の単なる存在は、前の段落で言及された種類の最適化を防止します。

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

一方的なデータフローを使用し、モデルに対してのみ変更検知を行います。変更を検出した場合、バインディングを更新することでDOMを更新させ、構造的な指示として *ngFor , *ngIf はDOMを更新します。したがって、DOMはモデルが実際に変更されたときのみ更新されます。

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します