[JavaScript] JSのパフォーマンス比較を簡単にできるサイト

こんにちは、最近JSを書きまくってる@yoheiMune です。
今日は、JavaScriptのパフォーマンスを簡単に確認できるサイトを見つけたので、 紹介ブログを書きたいと思います(・∀・)


http://jsperf.com

JavaScriptのパフォーマンス

みなさま、仕事やプライベートでこんな会話した経験ないですか？

• この書き方より、こっちの方が速く動くよ
• この書き方は、パフォーマンス的にダメだよ
• これとあれ、どっちの書き方の方がパフォーマンス良いんだろう？

特に3つ目の会話にばっちり答えられるのが、以下のサイトです。
http://jsperf.com

一つのテーマに対して、2つのJSを書いて、どちらの方がパフォーマンスが良いかを検証することが出来ます。

例えば、@yoheiMuneで以下のテストケースを追加してみました。
テストケースの追加もスゴく簡単です。

値を保持するのに、配列とオブジェクトどっちが速い？

http://jsperf.com/array-vs-object-value-container
以下2つのコードのうち、どちらが速く動くかを検証します。
（配列で値を保持する）

var array =[];
for(var i =0; i <1000; i++){
  array[i]="value"+ i;
}

（オブジェクトで値を保持する）

var object ={};
for(var i =0; i <1000; i++){
  object.i="value"+ i;
}

この結果ですが、配列の方が断然速そうですが、意外な結果が出ました。
ぜひ、結果は、こちらから確認してみて下さい。
なお結果ですが、自分で訪れたブラウザでテストした結果の他、 他の人がテストしたブラウザの結果も見ることが出来ます。

変数定義をfor-loop内と外のどちらでした方が高速か？

http://jsperf.com/in-or-out-var-definition
以下2つのテストケースのうち、どちらが速いかを検証しました。

（変数定義をループの中で行う）

for(var i =0; i <1000; i++){
  var someVar ="aaa"+ i;
}

（変数定義をループの外で行う）

var someVar;
for(var i =0; i <1000; i++){
  someVar ="aaa"+ i;
}

これは最初のケースの方が速そうですが、どうもそうでは無いみたいで。。
結果の詳細は、こちらから確認してみて下さい。

最後に

このサイトには、HTML5 Canvasのパフォーマンスについて調べていたら、辿りつきました。
こーゆうテストが簡単にできるって良いですね。
こーゆう便利サイトを自分でも作れるようになりたいものです。

テストケースは、日々たくさん追加されているようですので、これからちょくちょくチェックしたいと思います。

最後までご覧頂きましてありがとうございました。