🌎

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

2022/04/05に公開約900字

仮想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とロジックを分けられる利点があります。

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

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

Discussion

ログインするとコメントできます