リソースタイミングAPIの紹介

リソースタイミングAPI：Webパフォーマンスの測定に深く潜ります

この記事では、Webページで読み込まれたリソースに関する詳細なタイミング情報を収集するための強力なツールであるリソースタイミングAPIについて説明します。 このデータを理解することは、Webページのパフォーマンスを最適化し、ユーザーの遅延を減らすために重要です。

重要な概念：

包括的なタイミングデータ：
• APIは、高レベルのメトリックをはるかに超えるリソースごとにきめ細かいタイミング情報を提供します。これにより、パフォーマンスのボトルネックを正確に識別できます アクセス
• オブジェクト：window.performanceメソッドは、performanceオブジェクトの配列を返し、それぞれが単一のリソースの読み込みプロセスを詳述します。 windowgetEntriesByType()幅広いブラウザのサポート：
APIは、主要なブラウザー（Chrome、Internet Explorer、Operaなど）で優れたサポートを享受しています。ただし、サポートの検証が必要です。
• PerformanceResourceTimingサードパーティのリソースに関する考慮事項：APIは、ファーストパーティとサードパーティの両方のリソースで動作しますが、サードパーティのリソースの詳細なタイミングデータにはgetEntriesByType()HTTPヘッダーが必要です。 それがなければ、合計期間のみが利用可能です。PerformanceResourceTiming
• データの理解：
• 各オブジェクトは、次のような多数の属性を提供します Timing-Allow-Origin: *
：リソースのurl。

：ブラウザがリソースの取得を開始する前の時間。

：リソースをロードするのにかかる合計時間。PerformanceResourceTiming

：リソースリクエストを開始した要素（例：
• 、name、
、
• ）を示します。 startTimeその他の属性詳細特定の段階：
、
• 、duration、
、
• 、initiatorType、img、script、css、xmlhttprequest、
。 これらのタイミング段階の視覚的表現を以下に示します。
• redirectStart redirectEndfetchStart domainLookupStartdomainLookupEndAPIの使用法とブラウザの互換性：connectStartconnectEndAPIサポートのテストには、

  とwindow.performanceの存在をチェックし、window.performance.getEntriesByType()が配列を返すことを確認する必要があります。 このチェックの単純なコードスニペットは次のとおりです window.performance.getEntriesByType('resource') APIの機能を紹介する基本的なデモは、リソース（例えば、画像とスクリプト）をロードしてから、ページの読み込みで

  オブジェクトを繰り返して収集したデータを表示することで作成できます。

  if (!('performance' in window) ||
      !('getEntriesByType' in window.performance) ||
      !(window.performance.getEntriesByType('resource') instanceof Array)) {
      // API not supported
  } else {
      // API supported
  }

  結論：PerformanceResourceTiming

  リソースタイミングAPIは、詳細なパフォーマンス分析のための堅牢なメカニズムを提供します。リソースの読み込みでボトルネックを識別することにより、開発者はウェブサイトの速度とユーザーエクスペリエンスを大幅に改善できます。ブラウザのサポートは一般的に優れていますが、このAPIに依存する前に互換性をテストすることが重要です。 サードパーティのリソースに関する制限も考慮する必要があります よくある質問（FAQ）：

  元のテキストのFAQSセクションは、ほとんど変化しておらず、貴重な追加情報を提供します。 完全性のためにここに含めることをお勧めします。 （FAQSセクションはここでは複製するには長すぎますが、入力テキストから直接コピーする必要があります。）

以上がリソースタイミングAPIの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。