JavaScript プログラミング講座

 

ウェブパフォーマンスについて

 


■ウェブパフォーマンスについて


ウェブパフォーマンスは、HTML5 世代の API です。
 
実行環境の性能を測定するための機能がまとまっています。
 
http://www.w3.org/TR/hr-time/ (High Resolution Time)
 
http://www.w3.org/TR/navigation-timing/ (Navigation Timing)
 

■ Performance オブジェクトを取得する

 
window.performance プロパティを使用します。
 
パフォーマンスオブジェクトを取得する

// パフォーマンスオブジェクトを取得する
var performance_obj = window.performance;

// 出力テスト
console.log(performance_obj);
 


 

高分解能タイマーについて

 
 
 


■高分解能タイマー(High Resolution Time)とは?

 
マイクロ秒の精度で、時間を測定することができます。
 
マイクロ秒は、ミリ秒の千分の一です。
 
環境によっては、高分解能タイマーに対応していません。
 
測定できない場合、分解能は従来通りのミリ秒となります。
 

■従来の時間取得方法について

 
Date クラスの、getTime() メソッドを使用します。
 
ミリ秒の精度で、時間を得る事ができます。
 
ECMAScript 5.1 で追加された、Date.now() メソッドもあります。
 

■高分解能タイマーを取得する

 
performance.now() メソッドを使用します。
 
Performance.now ( ) :Number
引数 Voidなし
戻り値 Numberナビゲーションを開始してから、経過した時間(ミリ秒)が得られる
 
■戻り値
 
得られる単位は、ミリ秒です。
 
分解能は、マイクロ秒です。(小数第四位まで)
 
ナビゲーションを開始してから、経過した時間が得られます。
 
■ナビゲーションの開始とは?
 
前回のページから今回のページへと、遷移を開始した瞬間です。
 
前回のページのアンロードフェーズも含まれます。
 
■取得例
 
高分解能タイマーを取得する

(function(){

	// ------------------------------------------------------------
	// サポートチェック
	// ------------------------------------------------------------
	if(!(window.performance)) return;
	if(!(performance.now)) return;

	// ------------------------------------------------------------
	// 高分解能タイマーを取得する(ナビゲーションを開始してから経過した時間)
	// ------------------------------------------------------------
	var time = performance.now();

	// 出力テスト
	console.log(time);

})();
 

■任意のスクリプトの実行コストを測定する

 
1.開始地点の時間を測定する
 
performance.now() メソッドを使用します。
 
得られた結果は、変数に残します。
 
2.終了地点の時間を測定する
 
もう一度、performance.now() メソッドを使用します。
 
3.任意のスクリプトの実行時間を計算する
 
終了地点の時間から、開始地点の時間を減算します。
 
console.time() メソッドを使用する方法もあります。
 
■計算例
 
任意のスクリプトの実行時間を測定する

// ------------------------------------------------------------
// 実行直前の時間を取得する
// ------------------------------------------------------------
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);
 


 

パフォーマンスタイミングについて

 
 


■ PerformanceTiming オブジェクトを取得する

 
performance.timing プロパティを使用します。
 
■取得例
 
PerformanceTiming オブジェクトを取得する

(function(){

	// ------------------------------------------------------------
	// サポートチェック
	// ------------------------------------------------------------
	if(!(window.performance)) return;

	// ------------------------------------------------------------
	// PerformanceTiming オブジェクトを取得する
	// ------------------------------------------------------------
	var performance_timing = performance.timing;

	// 出力テスト
	console.log(performance_timing);

})();
 

■ PerformanceTiming のプロパティ一覧

 
以下の処理が実行された場合、その際の時間(ミリ秒)が記録されます。
 
実行されなかった場合は、0 値が得られます。
 
プロパティ名 説明 フェーズ
navigationStart Number (前のページから)遷移の開始 1
unloadEventStart Number (前のページの)onunload イベント開始 unload 2
unloadEventEnd Number (前のページの)onunload イベント終了 unload 3
redirectStart Number リダイレクト開始 redirect 4
redirectEnd Number リダイレクト終了 redirect 5
 
プロパティ名 説明 フェーズ
fetchStart Number Fetch 開始 App cache 6
domainLookupStart Number DNS 開始 DNS 7
domainLookupEnd Number DNS 解決 DNS 8
connectStart Number 接続の開始 TCP 9
secureConnectionStart Number (セキュア接続の開始) TCP 10
connectEnd Number 接続の確立 TCP 11
requestStart Number リクエスト開始 Request 12
responseStart Number リクエスト終了
レスポンス開始
Request
Response
13
responseEnd Number レスポンス終了 Response 14
 
プロパティ名 説明 フェーズ
domLoading Number readyState → "loading" Processing 15
domInteractive Number readyState → "interactive" Processing 16
domContentLoadedEventStart Number DOMContentLoaded イベント開始
Processing 17
domContentLoadedEventEnd Number DOMContentLoaded イベント終了 Processing 18
domComplete Number readyState → "complete" Processing 19
loadEventStart Number onload イベント開始 onLoad 20
loadEventEnd Number onload イベント終了 onLoad 21