プロファイリングページには、ナビゲーションタイミングAPIがロードされます

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

コアポイント

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

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

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

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

<code class="language-javascript">var start = new Date();

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

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

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

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

検出ブラウザーサポート

Date

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

<code class="language-javascript">var start = new Date();

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

録音されたイベント

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

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

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

ナビゲーションタイプ

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

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

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

redirectCountプロパティには、現在のページにナビゲートされたリダイレクトの数が含まれています。リダイレクトが発生しない場合、またはリダイレクトが別のソースから来た場合、redirectCountはゼロです。次の例は、ナビゲーションデータへのアクセス方法を示しています。

<code class="language-javascript">var start = new Date();

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

データの解釈

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

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

<code class="language-javascript">function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}</code>

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

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

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

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

以上がプロファイリングページには、ナビゲーションタイミングAPIがロードされますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。