2012/08/12更新

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

このエントリーをはてなブックマークに追加            

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

jsperf.com
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のパフォーマンスについて調べていたら、辿りつきました。
こーゆうテストが簡単にできるって良いですね。
こーゆう便利サイトを自分でも作れるようになりたいものです。

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

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。