PerformanceResourceTiming.nextHopProtocol

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

nextHopProtocol は読み取り専用プロパティで、リソースを取得するために使用されるネットワークプロトコルを表す ALPN プロトコル ID (RFC7301) で識別される文字列です。

プロキシーが使用されている場合、トンネル接続が確立されていると、このプロパティはトンネリングプロトコルの ALPN プロトコル ID を返します。それ以外の場合、このプロパティはプロキシーへの最初のホップの ALPN プロトコル ID を返します。

nextHopProtocol プロパティは、以下の値を取ります。

  • リソースを取得するために使用されるネットワークプロトコルを表す ALPN プロトコル ID (RFC7301) で識別される文字列。よくある値は次の通りです。
    • "http/0.9"
    • "http/1.0"
    • "http/1.1"
    • "h2"
    • "h2c"
    • "h3"
  • リソースがオリジン間リクエストで、HTTP の Timing-Allow-Origin ヘッダーが使用されていない場合は空文字列。

HTTP/2 も HTTP/3 も使用していないリソースを記録

nextHopProtocol プロパティを使用すると、HTTP/2 や HTTP/3 プロトコルを使用しないリソースを確認することができます。

PerformanceObserver を使用した例です。このオブジェクトは、新しい resource パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために buffered オプションを使用します。

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const protocol = entry.nextHopProtocol;
    if (protocol && !(protocol === "h2" || protocol === "h3")) {
      console.log(`${entry.name} uses ${protocol}.`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

Performance.getEntriesByType() を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する resource パフォーマンス項目のみを表示します。

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const protocol = entry.nextHopProtocol;
  if (protocol && !(protocol === "h2" || protocol === "h3")) {
    console.log(`${entry.name} uses ${protocol}.`);
  }
});

オリジン間のネットワークプロトコル情報

nextHopProtocol プロパティの値が空文字列である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の Timing-Allow-Origin レスポンスヘッダーを設定する必要があります。

例えば、https://developer.mozilla.org にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。

http
Timing-Allow-Origin: https://developer.mozilla.org

仕様書

Specification
Resource Timing
# dom-performanceresourcetiming-nexthopprotocol

ブラウザーの互換性

BCD tables only load in the browser

関連情報