ChromeのProfileを使ったり、console.timeを使ったりしてみたけど、User Timing APIという便利なAPIがあるらしいのでそれを使ってみた。
■環境
Chrome 35.0.1916.99 beta
※サポート外のブラウザで動作させたい場合のPolyfill(機能差分を埋めてくれるライブラリ)が公開されているのでそれを使うと良いそう。
■参考
User Timing API あなたの Web アプリをもっと理解するために
■仕込み
性能測定に使う主なメソッドは以下だけ。
window.performance.mark(...)測定したいポイントにこのマークを設置する。 例えば、
window.performance.mark('load_file_start');
...
window.performance.mark('analyze_file_start');
...
window.performance.mark('load_file_end');
...
window.performance.mark('analyze_file_end')
のようにmarkをどんどん設置していく。
■測定
マーク間の時間を測定したい場合にmeasureメソッドを使う。
window.performance.measure('load_file', 'load_file_start', 'load_file_end');
第一引数は測定値に対する名前なので分かりやすい名前を付ける。第二引数は測定の開始点のマーク名。
第三引数は終点のマーク名。
測定値はwindow.performanceが保持しているので、値の取得は
var items = window.performance.getEntriesByName('load_file');
などとする。ByNameの他にByTypeなどもある。
実際の数値の出力は
for ( var i = 0; i < items.length(); i++ ) console.log( items[i].name + ':' + items[i].duration + ' ms' );などとする。
■ちょっと便利なマーク値
User Timing APIが便利なのは事前に幾つかマークが仕込まれていること。
例えば、
HTMLの読込を開始する時は'fetchStart'
DOMの読込が完了した時は'domComplete'
完全にHTMLの読込・解析が完了した時は'loadEventEnd'
など。
全内容はコチラを参照→W3C Navigation Timing
ユーザがJSで仕込める以外の部分にもマークが仕込まれているのが便利。
DOMの読込が完了してからHTMLの全ロードが完了するまでの時間を測定したい場合は。
window.performance.measure('afer_dom', 'domComplete', 'loadEventEnd');
とすればマークを何も設置せずに測定できる。便利！