Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

Riot.js(v3)のeachメソッドによるループ速度を計測してみた

はじめに

Riot.js(以下riot)は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。(ここまでテンプレート)

v3がリリースされ、速度も改善されたとのことでしたので、検証してみました。 計測方法は、各ループ回数(10回・100回・1000回・10000回)を10回ずつ計測しその平均時間をとりました。

計測結果

以前v2.4.1にて計測したときの結果はこうでした。

10回ループ 100回ループ 1000回ループ 10000回ループ
1回目 0.018 0.064 0.686 6.538
2回目 0.022 0.057 0.467 6.65
3回目 0.015 0.056 0.455 6.276
4回目 0.012 0.057 0.444 6.229
5回目 0.027 0.078 0.537 5.88
6回目 0.015 0.083 0.381 6.682
7回目 0.011 0.05 0.457 6.629
8回目 0.012 0.057 0.53 6.669
9回目 0.021 0.055 0.386 6.725
10回目 0.028 0.063 0.441 5.706
平均(s) 0.0181 0.062 0.4784 6.3984

v2.6.7にて計測した結果はこうでした。(ベンチマークデモ)

10回ループ 100回ループ 1000回ループ 10000回ループ
1回目 0.016 0.084 0.467 4.419
2回目 0.017 0.078 0.447 4.607
3回目 0.017 0.089 0.58 4.87
4回目 0.019 0.074 0.565 5.442
5回目 0.017 0.075 0.405 4.071
6回目 0.026 0.072 0.406 4.002
7回目 0.018 0.077 0.544 4.7
8回目 0.021 0.084 0.565 3.947
9回目 0.036 0.074 0.517 4.597
10回目 0.015 0.075 0.548 4.17
平均(s) 0.0202 0.0782 0.5044 4.4825

そして今回v3.0.7での計測結果はこんな感じになりました。

10回ループ 100回ループ 1000回ループ 10000回ループ
1回目 0.016 0.062 0.387 3.373
2回目 0.018 0.066 0.391 3.519
3回目 0.016 0.083 0.347 3.366
4回目 0.015 0.06 0.402 2.909
5回目 0.02 0.083 0.405 3.389
6回目 0.019 0.067 0.361 3.287
7回目 0.015 0.072 0.36 3.071
8回目 0.02 0.063 0.313 3.884
9回目 0.019 0.059 0.436 3.295
10回目 0.019 0.069 0.378 3.213
平均(s) 0.0177 0.0684 0.378 3.3306

だいたい100回ループではそれほど差はありませんでしたね。(なんならv2.6.7では少し遅かった…) しかし、1000回・10000回となるとやはり差が出てきました。v3.0.7では10000回ループだと1秒以上速くなってました! これは嬉しい!webアプリケーションでは速度は重要な点ですので、速くなるにこしたことはありません。

2016/02/07 追記

v3.2.0にて速度改善が行われたようで、再度計測し直して見ましたが、また速くなってました!

10回ループ 100回ループ 1000回ループ 10000回ループ
1回目 0.013 0.053 0.293 1.927
2回目 0.014 0.04 0.26 1.904
3回目 0.014 0.045 0.253 1.699
4回目 0.012 0.046 0.244 1.982
5回目 0.014 0.045 0.259 2.201
6回目 0.014 0.06 0.257 2.085
7回目 0.012 0.047 0.239 1.929
8回目 0.012 0.058 0.233 1.747
9回目 0.013 0.075 0.237 2.342
10回目 0.013 0.051 0.268 2.185
平均(s) 0.0131 0.052 0.2543 2.0001

2017/09/26 追記

もうバージョンいくつだったか忘れましたが、さらにものすごく速くなりました! v3.7.2にて再度計測し直して見ましたが、衝撃です!(ベンチマークデモ)

10回ループ 100回ループ 1000回ループ 10000回ループ
1回目 0.01 0.015 0.11 0.712
2回目 0.008 0.016 0.105 0.735
3回目 0.009 0.011 0.078 0.681
4回目 0.007 0.014 0.114 0.719
5回目 0.007 0.012 0.107 0.695
6回目 0.004 0.01 0.101 0.683
7回目 0.007 0.014 0.105 0.71
8回目 0.008 0.013 0.112 0.718
9回目 0.007 0.019 0.099 0.702
10回目 0.006 0.013 0.097 0.71
平均(s) 0.0073 0.0137 0.1028 0.7065

最新版だと、10kループで1秒を切るくらいにパフォーマンス改善がなされました。 というわけで、v2から使っている皆さん、是非v3も試してみて下さい(゚∀゚)♪