Webページの読み込みパフォーマンスの詳細(xì)な分析：ナビゲーションタイミングAPIの詳細(xì)な説明

コアポイント

• ナビゲーションタイミングAPIは、DNSルックアップ、TCP接続確立、ページのリダイレクト、DOM建設(shè)時(shí)間、その他のインジケーターなど、Webページの読み込み中に詳細(xì)なタイミング情報(bào)を提供します。ブラウザに組み込まれており、追加のオーバーヘッドはありません。
• 現(xiàn)在、ナビゲーションタイミングAPIは、Internet Explorer 9、Firefox、およびChromeのみをサポートしています。したがって、APIを使用する前に、ブラウザのサポートを検出する必要があります。 APIはwindow.performance.timingオブジェクトで定義されています。
• APIは、ページの読み込みプロセス中に多くのマイルストーンイベントのタイムスタンプを記録し、各イベントはwindow.performance.timingオブジェクトのプロパティとして保存されます。イベントが発生しない場(chǎng)合、その値はゼロです。 APIは、ユーザーが特定のページにアクセスする方法を決定するインターフェイスも定義します。
• ナビゲーションタイミングAPIは、AJAX呼び出しと組み合わせて使用??して、実際のユーザーデータをサーバーに報(bào)告することができます。これにより、開(kāi)発者は実際の環(huán)境でページがどのように動(dòng)作するかを理解することができます。このデータは、ページの読み込みプロセスの視覚チャートを作成するためにも使用できます。

Webページの読み込み速度は、ユーザーエクスペリエンスに影響を與える重要な要因の1つです。負(fù)荷の速度が遅いと、ユーザーが不満を抱き、解約できます。ただし、ユーザーのブラウザ、ネットワーク條件、サーバーロード、アプリケーションコードなど、全體的な読み込み時(shí)間に多くの要因に影響するため、負(fù)荷が遅い原因のトラブルシューティングは簡(jiǎn)単ではありません。幸いなことに、ナビゲーションタイミングAPIは、この問(wèn)題を簡(jiǎn)単に解決するのに役立ちます。

過(guò)去に、開(kāi)発者はこれらの分野で収集されたデータへのアクセスが非常に制限されていました。多くの開(kāi)発者は、長(zhǎng)い間JavaScriptのオブジェクトを使用してパフォーマンスデータを収集してきました。たとえば、次のコードは、ページロードイベントハンドラーの後にタイムスタンプを比較することにより、読み込み時(shí)間を測(cè)定します。 Date

この方法にはいくつかの問(wèn)題があります。1つ目は、JavaScriptの精度が高くないことであり、Oversedはオーバーヘッドと混亂したアプリケーションコードを測(cè)定できますブラウザで実行した後の実行時(shí)間は、サーバー、ネットワークなどのページの読み込みプロセスに関するデータを提供できません。

var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);

DateナビゲーションタイミングAPIデビューDate

より正確で包括的なページロードデータを提供するために、W3CはナビゲーションタイミングAPIを提案しました。このAPIは、ページの読み込み中により詳細(xì)なタイミング情報(bào)を提供します。

オブジェクトとは異なり、ナビゲーションタイミングAPIは、DNSルックアップ、TCP接続確立、ページリダイレクト、DOMビルド時(shí)間、およびその他のさまざまなメトリックに関連する測(cè)定データを提供します。ナビゲーションタイミングもブラウザに組み込まれているため、追加のオーバーヘッドが発生していません。

検出ブラウザーサポート

Date

現(xiàn)在、ナビゲーションタイミングAPIは、Internet Explorer 9、Firefox、およびChromeのみをサポートしています。したがって、APIを使用する前に、ブラウザのサポートを検出する必要があります。 APIはwindow.performance.timingオブジェクトで定義されています。次の関數(shù)は、APIがサポートされているかどうかを検出します。

var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);

録音されたイベント

APIは、ページの読み込み中に多くのマイルストーンイベントのタイムスタンプを記録します。各イベントは、

オブジェクトの屬性として保存されます。次のリストでは、各イベントについて説明します。イベントが発生しない場(chǎng)合（ページリダイレクトなど）、その値はゼロです。 （注：Mozillaは、これらのイベントがこの順序で発生すると主張しています。）window.performance.timing

• navigationStart：ブラウザがプロンプトを完了してから、前のドキュメントをアンインストールする時(shí)間。以前のドキュメントがない場(chǎng)合、navigationStartはfetchStartに等しくなります。これは、ユーザーが知覚するページの読み込み時(shí)間の始まりです。
• fetchStart：ブラウザがURLを探し始める前の瞬間。検索プロセスでは、アプリケーションキャッシュをチェックするか、サーバーがキャッシュされていない場(chǎng)合はファイルを要求します。
• domainLookupStart：ブラウザがURL DNSの検索を開(kāi)始する前の瞬間。 DNSルックアップが不要な場(chǎng)合、値はfetchStartと同じです。
• domainLookupEnd：DNS検索後の瞬間時(shí)間が完了しました。 DNSルックアップが不要な場(chǎng)合、値はfetchStartと同じです。
• connectStart：ブラウザがサーバーに接続した瞬間。 URLがキャッシュまたはローカルリソースである場(chǎng)合、値はdomainLookupEndに等しくなります。
• connectEnd：サーバーとの接続を確立した直後の時(shí)間。 URLがキャッシュまたはローカルリソースの場(chǎng)合、値はdomainLookupEndと同じです。
• secureConnectionStart：HTTPSプロトコルを使用している場(chǎng)合、secureConnectionStartは、安全なハンドシェイクの開(kāi)始前に即時(shí)時(shí)間を設(shè)定します。ブラウザがHTTPSをサポートしていない場(chǎng)合、この値はundefinedでなければなりません。
• requestStart：ブラウザがURLリクエストを送信する前の時(shí)間。 API未定義requestEnd値。
• redirectStart：リダイレクトを開(kāi)始するU(xiǎn)RLフェッチの開(kāi)始時(shí)間。
• redirectEnd：リダイレクトが存在する場(chǎng)合、redirectEndは、受信した最後のリダイレクト応答の最後のバイトの後の時(shí)間を表します。
• responseStart：ブラウザが応答の最初のバイトを受信した直後の時(shí)間。
• responseEnd：ブラウザが応答の最後のバイトを受信した直後の時(shí)間。
• unloadEventStart：前のドキュメントのイベントの前の瞬間がトリガーされました。以前のドキュメントがない場(chǎng)合、または以前のドキュメントが別のソースから來(lái)ている場(chǎng)合、この値はゼロです。 unload
• ：前のドキュメントのunloadEventEndイベントの直後の時(shí)間がトリガーされます。以前のドキュメントがない場(chǎng)合、または以前のドキュメントが別のソースから來(lái)ている場(chǎng)合、この値はゼロです。別のソースにリダイレクトがある場(chǎng)合、unloadとunloadEventStartの両方がゼロです。 unloadEventEnd
• ：domLoading値が「読み込み」に設(shè)定される前の時(shí)間。 document.readyState
• ：domInteractive値が「インタラクティブ」に設(shè)定される前の時(shí)間。 document.readyState
• ：domcontentloadedイベントの前の時(shí)間がトリガーされます。 domContentLoadedEventStart
• ：domcontentloadedイベント後の瞬間がトリガーされます。
• domComplete：document.readyState値が「完全」に設(shè)定される前の時(shí)間。
• loadEventStart：ウィンドウの荷重イベントの前の時(shí)間がトリガーされます。イベントが起動(dòng)されていない場(chǎng)合、値はゼロです。
• loadEventEnd：ウィンドウの荷重イベント後の瞬間がトリガーされます。イベントが解雇されていないか、まだ実行されている場(chǎng)合、値はゼロです。

ナビゲーションタイプ

ナビゲーションタイミングAPIは、ユーザーが特定のページにアクセスする方法を決定するインターフェイスも定義します。 window.performanceオブジェクトには、2つのプロパティ（navigationとtype）を含むredirectCountオブジェクトも含まれます。 typeプロパティは、ユーザーが現(xiàn)在のページに移動(dòng)する方法を提供します。次のリストでは、type：

によって保存されている値について説明しています。

• URLを入力したり、リンクをクリックしたり、フォームの送信したり、スクリプトアクションを使用したりして、ユーザーがページに移動(dòng)した場(chǎng)合、typeの値は0です。
• ユーザーがページをリロード/更新する場(chǎng)合、typeは1に等しくなります。
• ユーザーが履歴（バックボタンまたはフォワードボタン）を介してページに移動(dòng)した場(chǎng)合、typeは2に等しくなります。
• その他の場(chǎng)合、typeは255に等しい。

redirectCountプロパティには、現(xiàn)在のページにナビゲートされたリダイレクトの數(shù)が含まれています。リダイレクトが発生しない場(chǎng)合、またはリダイレクトが別のソースから來(lái)た場(chǎng)合、redirectCountはゼロです。次の例は、ナビゲーションデータへのアクセス方法を示しています。

var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);

データの解釈

ナビゲーションタイミングAPIを使用して、ページの読み込み時(shí)間の特定のコンポーネントを計(jì)算できます。たとえば、DNSルックアップを?qū)g行するのにかかる時(shí)間は、

からtiming.domainLookupEndを差し引くことで計(jì)算できます。次の例では、いくつかの有用なメトリックを計(jì)算します。 「usertime」は、ユーザーエクスペリエンスのページの読み込み遅延の合計(jì)に対応しています。 「DNS」および「接続」変數(shù)は、それぞれDNSルックアップを?qū)g行してサーバーに接続するのにかかる時(shí)間を表します。 「リクエストタイム」は、サーバーに送信された合計(jì)時(shí)間を保存し、応答を受け取ります。最後に、「Fetchtime」は合計(jì)時(shí)間を保存して、ドキュメントの取得を完了します（キャッシュへのアクセスなど）。 timing.domainLookupStart関數(shù)は、ウィンドウロードイベントハンドラーで呼び出されていることに注意してください。これにより、ローディングイベントが完了した瞬間にのみナビゲーションタイミングデータが使用されます。ロードイベントハンドラーからタイミングデータにアクセスされると、setTimeout()の値はゼロになります。 timing.loadEventEnd

function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}

ナビゲーションタイミングAPIは、AJAX呼び出しと組み合わせて使用??して、実際のユーザーデータをサーバーに報(bào)告することができます。これは、開(kāi)発者が実際の環(huán)境でページの動(dòng)作を理解できるため、便利です。このデータは、ページの読み込みプロセスの視覚チャートを作成するためにも使用できます。実際、Google Analyticsには、レポートにナビゲーションタイミングデータが含まれています。

を覚えておくべきキーポイント

ブラウザで実行する前にリクエストがわからないため、
• javascriptのDateオブジェクトはページロードデータを正確に測(cè)定できません。
• ナビゲーションタイミングAPIはブラウザに組み込まれており、より詳細(xì)なタイミング測(cè)定値を提供します。
• APIは、ユーザーがページに移動(dòng)する方法も追跡します。
• ナビゲーションタイミングデータは、分析のためにサーバーに送信できます。

（ナビゲーションタイミングAPIに関するFAQセクションはここに追加でき、必要に応じて元のドキュメントからコンテンツを抽出して書(shū)き直すことができます）

以上がプロファイリングページには、ナビゲーションタイミングAPIがロードされますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。