ウェブパフォーマンスについて
■ウェブパフォーマンスについて
ウェブパフォーマンスは、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)とは?
マイクロ秒の精度で、時間を測定することができます。
マイクロ秒は、ミリ秒の千分の一です。
環境によっては、高分解能タイマーに対応していません。
測定できない場合、分解能は従来通りのミリ秒となります。
■従来の時間取得方法について
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 |