仮想DOMの基本のき。ー雰囲気理解を理解するー

仮想DOMって何よ？

仮想DOMとは、DOMをJavascriptのオブジェクトとして表現しているものです。DOMそのものを操作するのではなく、オブジェクトを変更して差分のみをDOMに反映することで、パフォーマンスを向上させます。

仮想DOMとは、DOMをJavascriptのオブジェクトとして表現しているものです。
DOMそのものを操作するときとは違い、オブジェクトを変更して 差分のみをDOMに反映させることで、パフォーマンスを向上させることができます。

React, Vueなどで使用されています。

DOM操作の時とどう違うの？

DOMをそのまま操作した時の描写の流れはこんな感じです。

1 HTMLドキュメント
2 リアルDOM(DOMツリー)
3 webページ

webページに変化を加えようとした際は、その都度htmlを解析して、DOMツリーを再構築します。

一方で、仮想DOMではこのような感じです。

1 HTMLドキュメント
2 仮想DOM
3 リアルDOM
4 webページ

ここで下記のことを行っています。

1 DOMツリーを新旧で2つ用意している
2 HTMLドキュメントが書き変わる
3 仮想DOMを再構築し、新旧DOMでの差分を検出する
4 差分のみをリアルDOMに反映する

メリットは？

上記で書いたように、仮想DOMは差分のみを反映させます。
なので、

• 無駄なレンダリングを防ぐ
  というのが大きなメリットとしてあります。

また、これに加えて

• UIとロジックの分離
• 状態の管理の簡略化
• UIとロジックを繋ぐ処理が容易
  といったメリットがあります。

まとめ

仮想DOMは、DOMを直接操作するときに対して、差分のみをDOMに反映させるという違いがあります。
それによって、無駄なレンダリングを減らしたり、UIとロジックを分けられる利点があります。

ただし、正しく扱わないと、差分がうまく感知されず、不必要な再レンダリングが行われ、逆にパフォーマンスが低下してしまうこともあります。

ここを意識して、正しく扱うことで、レンダリングの極力少ない開発を心がけたいと思います。