PerformanceResourceTiming.workerStart
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.
workerStart
は PerformanceResourceTiming
インターフェイスの読み取り専用プロパティで、サービスワーカーのスレッドが既に実行されている場合は FetchEvent
を送出する直前、またはサービスワーカーのスレッドがまだ実行されていない場合は、開始される直前に DOMHighResTimeStamp
を返します。このリソースがサービスワーカーに介入されない場合、このプロパティは常に 0 を返します。
値
workerStart
プロパティは以下の値を取ることがあります。
DOMHighResTimeStamp
- サービスワーカーが使用されていない場合は
0
。 - リソースがオリジン間リクエストで、HTTP の
Timing-Allow-Origin
レスポンスヘッダーが使用されていない場合は0
。
例
サービスワーカーの処理時間の計測
workerStart
および fetchStart
プロパティを使用して、 ServiceWorker
の処理時間を計測することができます。
const workerProcessingTime = entry.fetchStart - entry.workerStart;
PerformanceObserver
の使用例で、ブラウザーのパフォーマンスタイムラインに記録された新しい resource
パフォーマンス項目を通知します。オブザーバーが作成される前の項目にアクセスするために buffered
オプションを使用します。
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const workerProcessingTime = entry.fetchStart - entry.workerStart;
if (workerProcessingTime > 0) {
console.log(
`${entry.name}: Worker processing time: ${workerProcessingTime}ms`,
);
}
});
});
observer.observe({ type: "resource", buffered: true });
Performance.getEntriesByType()
を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する resource
パフォーマンス項目のみを表示します。
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const workerProcessingTime = entry.fetchStart - entry.workerStart;
if (workerProcessingTime > 0) {
console.log(
`${entry.name}: Worker processing time: ${workerProcessingTime}ms`,
);
}
});
オリジン間のタイミング情報
workerStart
プロパティの値が 0
である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間の時刻情報を見るためには、HTTP の Timing-Allow-Origin
レスポンスヘッダーを設定する必要があります。
例えば、https://developer.mozilla.org
に時刻リソースを見ることを許可するには、オリジン間リソースが送信する必要があります。
Timing-Allow-Origin: https://developer.mozilla.org
仕様書
Specification |
---|
Resource Timing # dom-performanceresourcetiming-workerstart |
ブラウザーの互換性
BCD tables only load in the browser