一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

jsPerfつかってみた

先日、JavaScriptコードスニペットに対してベンチマークをとることができる「jsPerf」というサービスをつかってみました。
今回はそのときの備忘録的メモを書きたいと思います。


サイトはこちら↓

http://jsperf.com/


それでは早速順番に進んでいきたいと思います。


1、Your details (optional)
まず、はじめに名前とかメールアドレスを書く欄がありました。
必須ではないっぽいですが、とりあえずどちらも埋めておきました。


2、Test case details
次は必須のマークが入ってますね。
テストのTitleとSlugを入れろってあります。

TitleはそのままただのTitle。なんでもOKだと思われます。

Slugは、例えばsample1みたいなSlugを指定すると、実際にテストした結果を

http://jsperf.com/sample1

で確認できるみたいですね。(あ、ちなみに上のURLは適当ですよ。。)

すでに使われているSlugだとバリデーションチェックではじかれてしまいました。


3、Preparation code
ここにはテストに必要なDOMやスクリプトを書いておきます。
jQueryとかprototype.jsとかいろいろ読み込めるようになってますね。

僕は今回ためしに、ネイティブのJSとjQueryを用いたベンチマークをとろうと思ったので、

<div id="hoge">hogehoge</div>
<div class="hoge">hogehoge</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


としました。
ちなみに今回、僕は使わなかったんですが、
Define setup for all testsとかDefine teardown for all testsなんて項目もありますね。
変数とか関数を定義しておくところでしょうか。


4、Code snippets to compare
ここがメインのところですね。実際に比較したいコードを書きます。
今回はこんな感じで、IDとClassのついたdivの中身をコンソールログで表示するコードを
JSとjQueryで比較してみました。

f:id:d_animal141:20130826223207p:plain


5、Save test case
あとは1〜4で書いたものを保存して、Run testsをクリックするだけです。

今回、上の3、4で書いたコードを実際にRunしてみると以下のようにでました。


f:id:d_animal141:20130826223602p:plain
f:id:d_animal141:20130826223609p:plain


ぱっと見でjQueryのClassを指定したコードがいかにクソかがよくわかりますねw


こんな感じでベンチマークをわかりやすく値や図で表示してくれるので、めっちゃ便利です!!

ちなみに今回のベンチマークはこちらで公開してます↓

http://jsperf.com/hideaki-sample1


今回は適当な比較しかしてないですが、
例えばjQueryセレクターの指定でどの書き方が一番速いのか悩んだ時とか、かなり有効活用できそうなサービスです!!

こういう素晴らしいサービスはどんどん取り入れていきたいですね!
がんばろー。


小さなことからコツコツと。