Tweet

Timing APIシリーズは、W3CのWeb Performance Working Groupが策定している、ブラウザのパフォーマンス計測用APIである。

API

• User Timing API
  • 任意のタイミングの時間計測
• Navigation Timing API
  • ブラウザ表示に関する時間取得
• Resource Timing API
  • リソースのロードに関する時間取得
• Frame Timing API
  • フレーム表示に関する時間取得
• Server Timing API
  • サーバが送信するヒント情報の取得
• High Resolution Time API
  • マイクロ秒単位のタイムスタンプ

ストリーミング

HLSやMPEG DASHについては、メディアチャンクをHTTPによりダウンロードしており、Resource Timing APIにより詳細情報を取得することができる。

Resource Timing API

値が取れるタイミングは以下(時間順)

1. startTime:ダウンロード処理開始
2. (redirectStart:httpリダイレクト開始)
3. (redirectEnd:httpリダイレクト処理終了)
4. fetchStart:実処理開始
5. domainLookupStart:DNSルックアップ開始
6. domainLookupEnd:DNSルックアップ終了
7. connectStart:TCP接続開始
8. (secureConnectionStart:SSL開始)
9. connectEnd:TCP接続完了
10. requestStart:クエスト送信
11. responseStart:レスポンス受信開始
12. responseEnd:レスポンス受信完了

サンプル(単位はミリ秒)

1. startTime: 613.7000000016997
2. fetchStart: 613.7000000016997
3. domainLookupStart: 796.4000000065425
4. domainLookupEnd: 913.70000000461
5. connectStart: 913.70000000461
6. secureConnectionStart: 916.4000000018859
7. connectEnd: 943.7000000034459
8. requestStart: 945.2000000019325
9. responseStart: 957.8000000037719
10. responseEnd: 958.7000000028638

また、全体の処理時間(responseEnd-startTime)は以下の変数に格納される

• duration

注意点

• クロスドメインの制限がある
  • メディアサーバが、チャンクファイルの送信時にTiming-Allow-Originヘッダを付与しないとstartTimeとresponseEndの時間のみしか取得できない(値が0となる）
• タイミングデータは、それぞれのチャンクのダウンロード終了時に、グローバル変数(配列)に自動的に追加される。
  • 同期的な処理を行うにはテクニックが必要

Tweet