読者です 読者をやめる 読者になる 読者になる

hidekatsu-izuno 日々の記録

プログラミング、経済政策など伊津野英克が興味あることについて適当に語ります(旧サイト:A.R.N [日記])

MorphDOM を使って jQuery replaceWith を置き換える

仕事では相変わらず 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 に置き換えるだけというお手軽な内容だったりする。創作性のかけらもない。