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

WEBエンジニア奮闘記

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

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

Riot.js プログラミング

はじめに

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

というわけで、v2から使っている皆さん、是非v3も試してみて下さい(゚∀゚)♪