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

Virtual DOMってどんだけ早いの?測ってみた

javascript VirtualDOM

この記事は VirtualDOM Advent Calendar 2014 - Qiita の2日目です。

mizchi くんから誘われて軽い気持ちで参加したら、初日からえらくエモいエントリー(VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita) でブルってます。

Virutal DOMとは、と言う話はしません。初日を見てください。いろいろ良いことあるみたいだけど、Virtual DOMってどんだけ早いの?知りたいですよね。

Elmの中の人が作ったTodoMVCのパフォーマンステストがあります。

いつものTodoMVCのデモで、100要素追加して、全て完了して、削除するというテストです。
「Run All」ボタンをクリックすると動きます。
http://evancz.github.io/todomvc-perf-comparison/

Virtual DOMを採用している Om, Mercury, Elm は圧倒的に早い!Angularは、、まぁこういうの苦手だよね。。 (localStorageに値を保存するので、一度クリアしたほうが正確に測れます)

ん?ちょとまて! React も Virtual DOM使ってるんじゃなかったのかよ。
Backboneに負けるのかよ!!

よく見ると、React のバージョンが 0.10.0 とちょっと古いようです。(2014/12/02現在最新は 0.12.1)
どうせなので、全て最新版にするとどうなるのかForkして作ってみました。
http://dsuket.github.io/todomvc-perf-comparison/

f:id:dsuke:20141202133927p:plain
んー、React 微妙な感じ。。。

Mercury と Elm は Matt-Esch/virtual-dom 実装を使っているのですが、Om は内部的に React の Virtual DOM を使っています。この違いはなんなんでしょうね。。

Om, Mercury, Elm は、関数型で Immutable なデータ操作を行います。もしかしてしてこれがJITコンパイラとかに効いているのかな?私が試したのは Chrome 39 でした。他のブラウザでは違う結果になりそうですね。

初日のエントリーにもあったように、Virtual DOM は Immutable なデータ構造と非常に相性が良いです。特にデータをストリームとして扱う FRP では強力ですね。

ところで、最近 MVI(Reactive MVC and the Virtual DOM — Futurice) のような話しもありました。また新手の MV* かよ、MVVMの派生系じゃないのかと思ったのですが、FRP のパターンとしてみると使えそうな気もします。そうみると、以前私は Flux は要らないといったのですが、これも FRP に当てはめると良さそうですね。Bacon.js で Flux を作ってみた例(Flux inspired reactive data flow using React and Bacon.js - Reaktor)なんか面白そうです。

最後は憶測で雑でしたが、そういったアーキテクチャを支える技術として Virtual DOM があります。逆に言うと、Virtual DOM のおかげで新しいアーキテクチャが実現可能になりました。まだまだ発展途上ですので、今後どんなアーキテクチャフレームワークが産まれるのか楽しみですね!

結論:
Virtual DOM 使うなら関数型(FRP)!
elm最高!!

追記

フォロー記事書きました。

VirtualDOM のパフォーマンステストについて,その後 - webとかmacとかやってみようか R