はじめに

モダンフロントエンドでよく耳にする仮想DOMについて知識の整理をしてみた

DOMと仮想DOM

画像のようなHTMLを構成する木構造のデータ

仮想DOMとはJavaScriptのオブジェクトである

通常のDOM操作

const title = document.querySelector(title)

このよなJavaScriptでのDOM操作はDOMが変更されるたびにHTMLを解析してレンダリングする為コストが高い

仮想DOMの操作

１:現在のDOMと同じ内容の仮想DOMを2つ用意
2:一方の仮想DOMをJSで操作し変更する（通常の）DOM操作より早い)
3:変更前と変更後の仮想DOMを比較し、その差分のみDOMに反映
4:反映されたDOMをレンダリングする

このように差分のみレンダリングする為コストが低く高いパフォーマンスを発揮できる

おわりに

BTC怖い