いきさつ

いつも適当にやってたのでちゃんと理解したい。

調べる前の自分の予想

• 結局ただの関数
• 結局実際のDOMへとレンダリングしたいといけないのだから速度的にはそんなに変わらないのでは？

What is the Virtual DOM?

結局はDOMにアクセスするためのオブジェクトです。 DOMにJavaScriptアプリケーションに都合の良いAPIを付属させたラッパーみたいなイメージです。(違うかも) それによりデータバインディングとかがやりやすくなっているわけですね。

なぜリアルDOMを直接いじる方式はだめなの？

ここですよね。 結局なにが問題なのか。

リアルDOMの場合大きな問題になるのが多数のノードの参照・検索・変更する場合、 これは非常にブラウザにとって大変な作業であり、 重くなります。

例を出します。

// liはたくさんあるものとする
$("ul")
  .find("li")
  .each(function (index, element) {
    // すべてのelementを参照しないといけない...
    if (index % 2 === 0) {
      // ↓はてきとう
      element.append("foo");
    }
  });

こんな感じでリアルDOMをいじろうとした場合、 非常に多くの範囲を参照していちいちノードを確認しなければなりません。 これは少量であればなんてことないですが、 たくさんの箇所をカバーしようとなると とたんにしんどくなってきます。

これは現在のHTMLのAPI上仕方のないことみたいです。

そこでVirtual DOMですよ。

先程紹介しましたとおり、VirtualDOMではVirtualDOM用のオブジェクトを使用します。 それにより変更前と変更後を比較して差分があったところだけリアルDOMにアクセスすることができます。 これによりリアルDOMへのボトルネックを極端に減らすことができるのです！！

これがVirtual DOMの大きなメリットです。

Vueはこんなかんじ

function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
  if (oldVnode.data.directives || vnode.data.directives) {
    _update(oldVnode, vnode)
  }
}

まとめ

なぜ Virtual DOM?

リアルDOMへの参照・検索・変更は重い。 VirtualDOMはリアルDOMへのアクセスを減らすアイデアパターン。

感想

う〜ん。 なるほど。 少しつかめて来ました。

参考

https://reactjs.org/docs/faq-internals.html

https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060