ウェブパフォーマンスについて
■ウェブパフォーマンスについて
ウェブパフォーマンスは、HTML5 世代の API です。
実行環境の性能を測定するための機能がまとまっています。
W3C により、仕様が勧告されています。
http://www.w3.org/TR/hr-time/ (High Resolution Time)
http://www.w3.org/TR/navigation-timing/ (Navigation Timing)
■ Performance オブジェクトを取得する
Performance オブジェクトを取得するには、window.performance プロパティを使用します。
パフォーマンスオブジェクトを取得する
// パフォーマンスオブジェクトを取得する
var performance_obj = window.performance;
// 出力テスト
console.log(performance_obj);
高分解能タイマーを取得する
■従来の時間取得方法について
従来の方法で、現在の時間を取得するには、Date.now() メソッドを使用します。
Date.now() メソッドは、ミリ秒まで得ることができます。
■高分解能タイマーについて
高分解能タイマーを使用すると、マイクロ秒まで測定することができます。（ミリ秒の千分の一）
環境によっては、必ずしも分解能がマイクロ秒になるとは限りません。
測定できない場合、分解能はミリ秒となります。
■高分解能タイマーを取得する
ナビゲーションを開始してから、経過した時間を取得するには、performance.now() メソッドを使用します。
得られる単位はミリ秒です。（分解能はマイクロ秒）
ナビゲーションの開始とは、前回のページから、今回のページへ遷移を開始した瞬間です。
ナビゲーション開始から経過した時間を取得する
// 高分解能タイマーに対応している
if(!window.performance){
}else if(!performance.now){
}else{
// ナビゲーションを開始してから、経過した時間を取得する
var time = performance.now();
// 出力テスト
console.log(time);
}
■任意のスクリプトの経過時間を測定する
任意のスクリプトの「実行前」と、「実行後」のタイミングで、now() メソッドを使って時間を取得します。
「実行後に得られた時間」から、「実行前に得られた時間」を引くと、任意のスクリプトの経過時間がわかります。
任意のスクリプトの経過時間を測定する
// 高分解能タイマーに対応している
if(!window.performance){
}else if(!performance.now){
}else{
// 実行前に時間を取得する
var time_old = performance.now();
// --- 測定したい任意のスクリプトを実行する ---
var i;
var a = [];
for(i=0;i<1000;i++){
a[i] = i;
}
// --- 測定したい任意のスクリプトを実行する ---
// 実行後に時間を取得する
var time_now = performance.now();
// 出力テスト
console.log(time_now - time_old);
}