概要
仮想DOMについて学習したのでアウトプットしたいと思います。
結論
仮想DOMとは端的に言うと効率よくレンダリングを行う仕組みのことです。
前提知識
DOM
DOMとはDocument Object Modelの略称で、HTMLを操作するためのAPIのことです。
<html>や<body>といったNode（ノード）と呼ばれるものがツリー構造になって構築されています。
JavascriptでHTMLを操作する際に使用します。
DOMが変更される際の仕組み
- DOMに変更が発生した場合、再度情報を受け取り直してDOMを再構築。
- 再構築されたDOMをもとに再描画されてブラウザに表示。
通常DOMを変更する場合は、DOMが再構築されるので描画が遅くなってしまいます。
そこで登場するのが仮想DOMです。
仮想DOMの仕組み
- DOMに変更が発生する場合、実際のDOMと同じ仮想DOMを作成。
- 仮想DOM上で変更を反映し、仮想DOMの変更前と変更後の差分を検出。
- 発生した差分のみを実際のDOMに反映。
差分のみを実際のDOMに反映しているためレンダリングが早くなります。