😺
仮想DOMのメリット
DOMとは
DOM(Document Object Model)は、HTMLやXMLを扱うための手法（API）です。
DOMを使うことで、プログラムからHTML等の各要素を容易に参照・定義することが可能となります。
DOMでは対象となる文書の各要素を抽出し、それらを階層構造として扱います。
この階層構造は文書のトップを「根」として、その下位の要素が木の枝のように分かれていくツリー構造となっています（DOMツリー）。
このツリー構造の枝葉の部分は「ノード」と呼ばれ、DOMではこのノードを辿っていくことで目的のデータにアクセスし、参照や編集を行います。
対象の文書の量が多いと、DOMツリーもその分大きなものになります。
そのため、1つの処理を変更する際に末端のノードを編集するだけでなく、そのアルゴリズムを再構築する可能性もあります。
つまり、レンダリングコストがかかり処理に時間がかかり効率が悪くなります。
仮想DOMとは
そこで、仮想DOMという概念を使用します。
仮想DOMは前述のリアルDOMとは異なり、実体としてあるわけではなく、JavaScriptのライブラリによってブラウザAPI上に実装された概念です。
ReactDOMのようなライブラリによって、仮想DOMを操作しリアルDOM と同期させ、その差分のみ反映させることができます。
メリット
- フレームワークを使ってコンポーネント化しているので、クリック時のイベント等が増えても管理（メンテナンス）がしやすい
- ノードをJavaScriptのオブジェクトでツリー（仮想DOMツリー）として表現し、変更前後の仮想DOMツリーを比較し、変更がある箇所だけをリアルDOMに反映する
- 不要なDOM操作が発生せず、レンダリングコストが少なくなることから、一般的に速くなる
デメリット
レンダリングコストが全くないわけではないので、小さなWebアプリケーションの場合は、リアルDOM操作の方が速いこともあるようです。
大きなWebアプリケーションになるほど、仮想DOMの恩恵があるみたいですね。
参考
Discussion