1. User Timing API について
User Timing Level 2 というAPIを使うと、特定の処理 (JavaScript) に掛かった時間を計測することができます。
このAPIを使ったサンプルコードを紹介します。
2. サンプルコード
このサンプルコードでは、do_something()
という関数の実行に掛かる時間を計測しており、結果は ブラウザの開発者ツールの Console パネルに出力されます。
// 計測開始
// PerformanceMarkオブジェクトを生成する。"startTask1" という名前を付けておく。
performance.mark("startTask1");
// 何らかの重い処理を実行する
do_something();
// 計測終了
// PerformanceMarkオブジェクトを生成する。"endTask1" という名前を付けておく。
performance.mark("endTask1");
// measure() を実行して PerformanceMeasure オブジェクトを生成する
// 第1引数:このオブジェクトの名前
// 第2引数:開始地点のPerformanceMarkオブジェクトの名前
// 第3引数:終了地点のPerformanceMarkオブジェクトの名前
performance.measure('Task1', 'startTask1', 'endTask1');
// 生成したオブジェクトを取得する
// 第1引数:PerformanceMeasureオブジェクトの名前
// 第2引数:entryType('measure' を指定する)
console.log(performance.getEntriesByName('Task1', 'measure'));
performance.getEntriesByName('Task1', 'measure')
の戻り値は、PerformanceMeasure オブジェクトの配列であり、通常はその中の1つ目が目的のオブジェクトのはず。この1つ目のオブジェクトのduration
プロパティに、掛かった時間がセットされています(下の画面を参照)。