皆さん、ブエナスタルデス（こんにちは）！アンドレです。

最近、たまたまJSのパフォーマンスに関する記事を立て続けに目にしまして、自分も意識してより速いコードを書こう！と思い立ちました。
しかしながら、よほどひどいコードを書かない限りは、通常体感できるほどの差は出ません。そこで、パフォーマンスのテストをする術を調べていたところ、jsPerfというサービスがあることを知り、今回はそのご紹介と、実際にいくつかテストした結果をご報告したいと思います。

jsPerfとは

Benchmark.jsという、まんまJSのベンチマークテストのためのライブラリがあり、その作者の方がそれを用いて作ったサービスで、Web上で必要事項を入力するだけで簡単にテストができるスグレモノです。一応重要なところだけご説明しておきますと、

Slug

ここに入力したものがjsperf.com以下のURLとして使われます。

Published

チェックを外すと非公開になります。公開されたコードは他の人がいじってフォークすることもできます。

Preparation code HTML

ここに入力したものがテスト用HTMLのbody内に出力されます。下にあるボタンを押せばjQuery等のメジャーなライブラリを簡単に追加できます。

Define setup for all tests

共通で使用する変数や関数、配列などをここに定義しておきます。
あとはCode snippetにテストしたいコードを入力し（足りなければAdd code snippetで追加）、Save test caseで保存します。保存されるとテストページに移動するので、そこで思う存分テストしてください。

れっつてすと

用意した変数
var $li = $('.js-list li');

用意したHTML
<ul id="js-list" class="js-list">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>

jQueryセレクタにタグを追加する or しない

結果

クラスのみのほうが速いです。

オブジェクトを変数に格納してから使用する or しない

結果

オブジェクトに指定する処理が1つ2つの場合はほぼ変わりませんでしたが、処理させる数が増えれば増えるほど、セレクタ処理にかかる時間分、どんどん遅れていきますね。

ちなみにクラスセレクタを使用した場合の結果はこちら

クラスセレクタを使用する場合はより積極的に変数に格納する必要がありそうです。

ついでにメソッドチェーンの偉大さをかみしめてみる

結果

やはりセレクタ処理を最小限にすることで、お手軽かつ確実なパフォーマンス向上が見込めますね。

forループの長さを最初に格納する or しない

結果

格納したほうが良い、と割とよく書いてあるのですが変わりませんね・・・？

ループをforで回す or each()で回す

結果

eachメソッドは重いというイメージがありましたが、jQueryが進化したのでしょうか。

switchの代わりにifを使ってみる

結果

ほぼ速度は変わりませんでした。

条件分岐で一番多く通るところを最後にしてみる

結果

ほぼ変わりませんでしたが、やはり最初にしておくほうが良いと思います。

まとめ

このように、テストすることでその処理の重さや、実際にどの程度速度が改善されるのかが分かるため、より効率的にパフォーマンスの見直しを図ることができます。良いコードを書き、最高のパフォーマンスでWebサイトをご利用いただけるようにしていきたいものです。
ちなみに今回はMacのOS X 10.9.5、Chrome最新版でテストしましたが、環境によって差異もあるかと思います。jsPerfでは環境ごとのテストコードのパフォーマンス結果が残るため、比較もしやすいです。ぜひ皆さんもご自身でいろいろテストしてみてください！