PerformanceResourceTiming.secureConnectionStart
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.
secureConnectionStart
は読み取り専用プロパティで、現在の接続を保護するためにブラウザーがハンドシェイクプロセスを開始する直前に timestamp
を返します。安全な接続が使用されていない場合、このプロパティはゼロを返します。
値
secureConnectionStart
プロパティは以下の値を取り得ます。
- リソースが安全な接続を介して取得された場合、ブラウザーが現在の接続を安全にするためにハンドシェイク処理を始める直前の時刻を示す
DOMHighResTimeStamp
です。 - 安全な接続が使用されていない場合は
0
です。 - リソースがキャッシュから即座に取得された場合は
0
です。 - リソースがオリジン間リクエストで取得され、HTTP の
Timing-Allow-Origin
レスポンスヘッダーが使用されなかった場合は0
となります。
例
TLS ネゴシエーション時間の測定
secureConnectionStart
と requestStart
プロパティを使用して、TLS ネゴシエーションにどれだけ時間がかかったかを測定することができます。
const tls = entry.requestStart - entry.secureConnectionStart;
PerformanceObserver
を使用した例です。このオブジェクトは、新しい resource
パフォーマンス項目がブラウザー上のパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために buffered
オプションを使用します。
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const tls = entry.requestStart - entry.secureConnectionStart;
if (tls > 0) {
console.log(`${entry.name}: TLS negotiation duration: ${tls}ms`);
}
});
});
observer.observe({ type: "resource", buffered: true });
Performance.getEntriesByType()
を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する resource
パフォーマンス項目のみを表示します。
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const tls = entry.requestStart - entry.secureConnectionStart;
if (tls > 0) {
console.log(`${entry.name}: TLS negotiation duration: ${tls}ms`);
}
});
オリジン外へのタイミング情報の公開
secureConnectionStart
プロパティの値が 0
の場合、リソースは安全な接続を使用していないか、オリジン間リクエストであるかのどちらかです。オリジンを跨いでタイミング情報の確認できるようにするには、HTTP の Timing-Allow-Origin
レスポンスヘッダーを設定する必要があります。
例えば、https://developer.mozilla.org
に時刻リソースを確認することを許可するには、オリジン間リソースが送信する必要があります。
Timing-Allow-Origin: https://developer.mozilla.org
仕様書
Specification |
---|
Resource Timing # dom-performanceresourcetiming-secureconnectionstart |
ブラウザーの互換性
BCD tables only load in the browser