Virtual DOM
必要最小限のDOM更新
vdomのリポジトリ
VDOMはJSONで表現することが多い
ASTと同じような感じ
ts{
nodeName: "div",
children: [
{
nodeName: "input",
attributes: {
type: "text",
placeholder: "Search",
onChange: ""
},
children: []
},
{
nodeName: "List",
attributes: {
items: ["Hoge", "Piyo"]
},
children: []
}
]
};DOM構築
整合性のチェック
レンダリングツリーの構築
レイアウト計算
など
データの流れの一例 ref
JSX
↓Babelで
pure JS
この変換要る？コンパイラがなくて作るの面倒だからかな
この変換は静的に行えるから別にパフォーマンス云々の問題にならないからどうでもいいんか
↓Preactの
h 関数でVDOM(json)
↓Preactの関数で
DOM
流れ
仮想DOMツリーを2種類用意する（変更前後のツリー2種類）
何らかのアクションでstateが書き換わる
仮想DOMを再構築する
変更前後の仮想DOMツリーを用いて差分検知する
差分があった箇所だけリアルDOMに反映する
変更時の内部手順
初回は全画面をVDOMで構築
これを本物のDOMに変換して描画
変更があったら、再び全画面をVDOMで構築
一つ昔のVDOMと比較し、差分のみを本物のDOMに反映する
memo
変更のたびにVDOMを全て作るのは仕方がないっぽい
ここも改善できたらもっと速くなりそうだなー(こなみ)
本物のDOMを作るコストよりはめちゃくちゃ低いらしい
ツリーの比較アルゴリズム
要素のタグが変更されたら、その子も全て変更する
ある要素がツリーの別の改装に移動することはない
同じ階層で要素が入れ替わるときは、要素に付けた一意のkeyで追跡する
memo
全ての比較をするわけではなく、重要なところだけを見てコストを抑えているらしい
アニメーションとかどうやってるんだ？
VDOMからDOMを作る内部処理をしりたい
そもそもブラウザってどうやって描画してるんだ？
DOM作成のどの辺の処理がコストが高い原因になってるの？
rs
rs
参考
『基礎からわかるElm』 p.154-
くわしい
まだ全部読んでない
作って学ぶ
普通のDOM