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も試してみて下さい(゚∀゚)♪