仮想DOMとは
仮想DOM(virtual DOM)は、DOMをJavaScriptオブジェクトの形式で表現したもの。
これらのオブジェクトには、ノード名/属性/子ノードなど、実際に表示されるDOMノードを記述するプロパティがある。
<div class="counter"> <h1>0</h1> <button>-</button> <button>+</button> </div>
上記マークアップの仮想DOMは、次のようになる。
{ nodeName: "div", attributes: { class: "counter" }, children: [ { nodeName: "h1", attributes: {}, children: [0] }, { nodeName: "button", attributes: {}, children: ["-"] }, { nodeName: "button", attributes: {}, children: ["+"] } ] }
仮想DOMを使う理由
ライブラリやフレームワークは仮想DOMをパフォーマンス向上の手段として使っている。
アプリケーションの状態が変わる時、更新を反映するためにDOMの再構築を行う必要があるが、これにはコストがかかる。
仮想DOMを使うことで、状態が変更されたときに古い仮想DOMと新しい仮想DOMの差分を比較し、その差分だけを実際のDOMに反映させることができる。 そのため、仮想DOMを使うことで一般的にはDOM変更の際のコストを小さくし、その結果表示速度を向上させることができる。