ドーモ、Javascript サン。　レガシーXNA野郎　デス

JavaScript（Three.JSやWebGL)でいざ本格的なコードを書いてガチガチに書きまくると、当たり前ながら処理が遅くなってきます。
その遅くなってきた原因の調査に、過去に開発していたXNAでは「TimeRuler」という非常に役に立つものがありました。
・・・Javascriptには無いの？

なかったようなので、作りました。

　何をするやつなの？どういうときに使うの？

まずは、こちらをご覧ください。
↓そこそこ重い、パーティクルのサンプル↓
こちらのサイトで、左中断あたりで伸びている緑とか青のバーが、今回作ったものになります。

何をしているかというと、
「計測開始と計測終了の間にかかった時間（ミリ秒）を、メーターで表示している」だけです。
このメーターをいくつでも増やせるので、
「なんとなーく、ココが重そう」という場所に片っ端から仕込んでおき、メーターの伸び縮みを見て、実際に重い・負荷がかかっている処理を探すことが目的です。

組み入れ方

いちばん簡単なサンプル（ソース）がGitHubにあります

１：こちらのGitHubから、JfTimeRuler.js　を落としてきます。
２：インポートして、こんな感じで宣言します。

<script src="js/JfTimeRuler.js"></script>
<script>
 var ruler = new JfTimeRuler();
・・・

３：DOMツリーに追加します（ここで、Three.jsとそうでない場合で違いがある）
Three.jsを使わない場合

document.body.appendChild(ruler.dom);

Three.jsを使う場合
stats.js を追加する方法を参考にしてください（人によって組み方が違うと思うので‥）。

container.appendChild(ruler.dom);

４：計測したい場所に、仕込みます。

ruler.add("ラベル名");

５：updateで、実際に画面に描画します。

ruler.update();

という感じです。

もうちょっと詳しく

中にあるメソッドをもうちょっと解説

初期化時引数(_x,_y)：そのまんま、スクリーン上での位置を指定できます

setTargetFrameRate(_f)：目標としているフレームレートを変更できます。標準は60(秒間60回更新）です

add(ラベル名、色）：addはラベル名が最低限必要ですが、バーの色を直接指定することもできます。