PerformanceResourceTiming.domainLookupStart
domainLookupStart は読み取り専用プロパティで、ブラウザーがリソースのドメイン名検索を開始する直前の timestamp を返します。
値
domainLookupStart プロパティは以下の値を取ります。
- ブラウザーがリソースのドメイン名検索を始める直前の
DOMHighResTimeStamp。 - リソースがキャッシュから即座に取得された場合は
0です。 - リソースがオリジン間リクエストで取得され、HTTP の
Timing-Allow-Originレスポンスヘッダーが使用されなかった場合は0となります。
例
DNS ルックアップ時間の計測
domainLookupStart と domainLookupEnd プロパティを使用すると、 DNS ルックアップの発生に対してどれだけ時間がかかるかを計測することができます。
js
const dns = entry.domainLookupEnd - entry.domainLookupStart;
PerformanceObserver を使用した例です。このオブジェクトは、新しい resource パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために buffered オプションを使用します。
js
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const dns = entry.domainLookupEnd - entry.domainLookupStart;
if (dns > 0) {
console.log(`${entry.name}: DNS lookup duration: ${dns}ms`);
}
});
});
observer.observe({ type: "resource", buffered: true });
Performance.getEntriesByType() を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する resource パフォーマンス項目のみを表示します。
js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const dns = entry.domainLookupEnd - entry.domainLookupStart;
if (dns > 0) {
console.log(`${entry.name}: DNS lookup duration: ${dns}ms`);
}
});
オリジン間のタイミング情報
domainLookupStart プロパティの値が 0 である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の Timing-Allow-Origin レスポンスヘッダーを設定する必要があります。
例えば、https://developer.mozilla.org にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。
http
Timing-Allow-Origin: https://developer.mozilla.org
仕様書
| Specification |
|---|
| Resource Timing # dom-performanceresourcetiming-domainlookupstart |
ブラウザーの互換性
BCD tables only load in the browser