実際のところどうなんだろうと思って試してみました。がどれがいいとかいう基準ではなく単純に私の興味的なところで試しただけですので。。
バージョン等々
各JSのバージョンは以下。
| ライブラリ | バージョン |
|---|---|
| React | 15.5.4 |
| Riot | 3.4.3 |
| Vue.js | 2.3.0 |
テストにはMochaとNightmareを使ってみました。
| ライブラリ | バージョン |
|---|---|
| gulp-mocha | 3.3.0 |
| nightmare | 2.10.0 |
それぞれのソースはgithubにあげてます。書き方がおかしいところあるかもしれませんが...
https://github.com/hayashida/js-comparison
今回試したこと
最初は
- JSONデータを10,000件取得して表示する
ただそれだけをしてみました。
結果としてはこんなかんじ。
| ライブラリ | 1回目 | 2回目 | 3回目 | 4回目 | 5回目 |
|---|---|---|---|---|---|
| React | 2719ms | 2611ms | 2560ms | 2612ms | 2807ms |
| Vue.js | 1110ms | 1788ms | 1079ms | 1785ms | 1842ms |
| Riot | 1532ms | 1479ms | 1477ms | 1493ms | 1549ms |
私としては意外にもRiotが早いことに驚きました。載せているのは5回だけですがRiotはわりと安定して描画しているようでした。そしてReactが思ったより伸びなかったのも...という感じでした。
これだけではあっさり終わってしまうので少し条件を加えて再度試してみました。
- spanタグからinputタグに変更
- inputタグをnumberとtextで分岐させて表示する
| ライブラリ | 1回目 | 2回目 | 3回目 | 4回目 | 5回目 |
|---|---|---|---|---|---|
| React | 7257ms | 7067ms | 7157ms | 6118ms | 7988ms |
| Vue.js | 5596ms | 5535ms | 6209ms | 6075ms | 3300ms |
| Riot | 9296ms | 9444ms | 10010ms | 9937ms | 12259ms |
そうするとVue.jsは安定していますがRiotが少し遅いかんじになってしまいました。処理が加わると色々と影響がでるのかもしれませんね。
ちなみにファイルサイズはこんなかんじ。
| ファイル名 | サイズ(byte) |
|---|---|
| react.js | 784616 |
| vue.js | 243437 |
| riot.js | 125145 |
このあたりはコンパイルの仕方によっても変わってくるかもしれませんが参考程度に。
まとめ
テストとしていいものかはわかりませんが私としては結構おもしろかったです。
ただ冒頭に書いたようにじゃあVue.jsをお勧め。というわけではなく作るものや状況によって一番いいものを選ぶのが大事だと思いますので本当に参考程度で。
色々と試すよりも一つを極めた方がいいものは作れると思います。