9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Virtual DOM(仮想DOM)とShadow DOMの違い

Last updated at Posted at 2019-08-13

名前は似てるけど中身は全然違うんじゃ〜

Virtual DOM (仮想DOM)

VueやReactなどのJavaScriptのライブラリ/フレームワークにおけるViewの設計図。VueやReactは、画面上の文字列などが変更された直後に、内部的に仮想DOMを設計図として作り、新旧の設計図を見比べて内容が変更されている箇所だけ実DOM(実際にHTMLで描画されるDOM)を書き換える(=差分更新)。大体の場面において仮想DOMは実DOMよりも速いとされる。
Qiitaでは「なぜ仮想DOMという概念が俺達の魂を震えさせるのか」が有名ですね。

Shadow DOM

Web Componentsにおける技術のひとつで、カプセル化されたDOMまたはそれを実装するための技術のこと。Shadow DOMはメインのドキュメントツリーには存在せず、独自のサブドキュメントツリーを形成し、それを元に画面に描画される。例えば、Chromeの<video>タグは内部的にShadow DOMで実装されており、videoタグを使うと再生ボタンや時間表示・音量ゲージなどが表示されるが、devtoolsのHTML文書構造からはこれらのDOMは確認できないようになっています。
WebComponentsについては拙作「【コードなしで理解する】 WebComponents超入門」をご覧ください。

参考

9
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?