仕事では相変わらず jQuery を使っているのだけれども、画面の書き換えには replaceWith を多用している。昨今のブラウザはものすごく高速なので、さほど遅さを感じるわけではないけれども、それでもタブ移動のような場合には、遅れを感じてしまうことがある(仕事で使っているPCが非力ということもあるけれども)。
VirtualDOMについて調べていたところ、VirtualDOMじゃなくてもそんなに速度差ないんだよ、と主張している人々がおり、そのひとつの実装として MorphDOMが紹介されていた。
VirtualDOMを使う場合、あるべきビューとしての仮想DOMと新しい仮想DOMを比較してパッチを当てる方式を取るため、既存の考え方と共存させるのはなかなかに難儀だと思われる。しかし、本物のDOMを比較してパッチを当てるのであれば、DOM の置換と同じように使えるのではないか……という思いつきで作ってみたのが以下のライブラリ。
https://github.com/hidekatsu-izuno/jquery.morphreplace
使い方は、scriptタグでロードするだけでOK。jQuery の replaceWith と replaceAll はこのプラグインが勝手に置き換えるので、プログラム側の変更は不要です。
残念ながら、ローカルの chrome でデモを動かして見た限りだと、普通の replaceWith との速度差はほぼなし。条件によっては有利/不利あるのかもしれないけれども、今のところ、メリットがよくわからない感じ。
なお、ソースコード読んでもらえればわかるように、jQuery のメソッドをコピペして replaceChild を MorphDOM に置き換えるだけというお手軽な内容だったりする。創作性のかけらもない。