仮想DOMとは、主にReactやVueで採用されているSPAを実現するために使われている技術の1つです。
旧来のMPAであればページ遷移や、APIとの通信が発生しHTMLファイルが返却された場合にページ全体を描画する必要がありました。
SPAでは変更箇所のみを書き換えることが可能です。
仮想DOMは以下のような動作します。
- 仮想DOMが操作によって状態が変化した時、変化前と変化後の差分を検出する(diff)
- 差分が発生した箇所の変更内容を実際のDOMに反映する(patch)
このようにdiff and patch と呼ばれる処理が行われることで、仮想DOMを通してDOMを簡単かつ迅速に扱うことが可能になります。
最近のモダンフロントフレームワークでは仮想DOMが主流ですが、Svelteのように仮想DOMを使用しないものもあります。
