ブラウザごとにベンチマークをとれるjsPerfが便利すぎる

JavaScript

JavaScriptのコードスニペットのベンチマークをとれるjsPerf(http://jsperf.com/)というWebサービスを知って、
けっこう簡単で便利だったので紹介します。


ベンチマークというとプロファイラを使ったり、
計測したい処理の前後に*1Dateオブジェクト作って、差分をチェックしてゴニョゴニョする感じでした。

var start = new Date();

// 計測対象の処理
hoge();

var end = new Date();

var processTime = end - start; // start から end までのミリ秒を得る

ただ、JavaScriptの場合、短いプログラムだと結果が不安定だったり、
ブラウザによって速度が左右されたりします。


そんな時に使えるのが「jsPerf」です。
このWebサービスは、計測したい処理が1秒間に何回実行できたかでベンチマークを記録します。
そのため、回数が多いほどパフォーマンスが良い事になります。
また、この計測方法だと1ミリ秒以下の短い処理でも大体の時間が分かります。


内部の処理はjsPerfの中の人が作った「Benchmark.js(http://benchmarkjs.com/)」というライブラリが使用されています。


今回は「高速な文字列の連結」というネタでベンチマークを取りたいと思います。


比較する処理は以下とします。
1. 「Array.push() で配列に格納して Array.join() で繋げる」
2. 「+ 演算子で繋げる」


計測するコードはこんな感じです。
実行回数は10万回です。

var array = new Array();
for (var i = 0; i < 100000; i++) {
	array.push(i);
}
var txt = array.join("");

var txt = "";
for (var i = 0; i < 100000; i++) {
	txt += i;
}

jsPerfの使い方

http://jsperf.comにアクセスします。
基本的な使い方は、必須項目(赤いアスタリスクがついてるもの)を埋めて「Beautify code」か「Save test case」ボタンを押下します。
「Beautify code」はインデントを揃えてくれます。

その他もろもろについては上から順番に、

    • 「test cases(http://jsperf.com/browse)」のリンクから他のユーザが作成したベンチマークを見る事ができます。
    • ユーザ名を登録しておくと、過去に作成したベンチマークを一覧で見る事ができます。
    • 「slug」は自分のベンチマークのURLになります。
    • デフォルトでは「title」の文言が設定されます。変更する事も可能です。
    • Publishedのチェックを外すと、ベンチマークを非公開にする事ができます
    • 「Preparation code」では、事前準備として必要なDOMを書いたり、共通処理などを書く事ができます。


設定を保存すると以下の画面に遷移するので、
後は、「Run tests」ボタンを押下すると計測してくれます。


別のブラウザで自分が作成したベンチマークのURLを開いて計測すると、
ブラウザごとのベンチマークを計測してくれます。
また、表示方法も数値だけでなく棒グラフや円グラフでも表示してくれます。
以下は私の環境で Google Chrome と Firefox と Safariでベンチマークをとってみました。



というわけで、肝心の計測結果ですが、
最近のブラウザだとJavaScriptの文字列の連結はどっちでやっても速度はほとんど変わりませんでしたw


余談ですが、
はてダだとスクロールしたキャプチャが、どうやっても解像度がキレいなままアップできませんでした。
どなたか対応方法知ってたら教えてください。

*1:Dateオブジェクトは数値として扱った場合、ミリ秒の数字になります。