乱数を発生させるスクリプトのパターンのパフォーマンス[JS]

「複数の画像をランダムに表示させる」というJavaScriptを書いてたとき、乱数が生成されて画像が表示されるのが遅いなー、と思い、パフォーマンス測定をしたときに発展があったのでブログに書きます。

事の発端

僕がたまたまFacebookに以下のようにポストしたのが事の発端です。

(1)var index = Math.round(Math.random () * 5); (2)var index = parseInt(Math.random() * 5); だと、(1)のほうが平均的に1ms早い。

そのときは、以下のようにFirebugで計測していたのですが、平均的に(1)のほうが1ms早いという結果がでました。

console.time('id');
var index = Math.round(Math.random () * 5);
$("#hoge").eq(index).show();
console.timeEnd('id');
//あと省略

その結果を踏まえて、上記のように(1)のほうが早かったとポストしたところ、2人の神が降臨しました。

神々のお告げ[謎]

神A[謎]こと@itasanが下記のようにコメントしてくれました。

(3)var index = ~~(Math.random() * 5); は(2)とほぼ変わらないくらい?

var index = ~~(Math.random() * 5);という記述方法があるのかー、と知りませんでした。そして計測すると平均的に(3)のほうが 0.5ms早いという結果となりました。

ブラウザによって差異もでるだろうけど、(3)はできる子だねーと締めくくろうかと思った矢先に神B[謎]こと@5509が下記のようにコメントくれました。

Firefoxちゃんがかなり顕著ですねー http://jsperf.com/math-random-time

と、jsPerfのリンク付きで(4)番目のパターン:parseInt(Math.random() * 5, 10);を追加した測定結果でした。リンク先の測定結果をみると

やはり(3)var index = ~~(Math.random() * 5);が最も早いという結果となりました。

まとめ

今回は、 FirefoxとChromeでしか試してませんが、同じ環境でも結果がことなる場合があるかもしれませんが、以下のように結果となったのでご参考まで。板さんと徳田さんどうもご協力ありがとうございました。

結果

Chrome

Firefox