PerformanceNavigationTiming: activationStart プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

activationStart は読み取り専用プロパティで、文書がプリレンダリングを開始してからアクティブになるまでの時間を表します。

値

文書のプリレンダリング開始からアクティブになるまでの時間をミリ秒単位で表す DOMHighResTimeStamp。

ページがプリレンダリングされていない場合、またはまだプリレンダリング中の場合、値は 0 です。

例

プリレンダリングされたページの検出

プリレンダリングされた文書がアクティブ化されると、activationStart は現在の時刻に設定されます。次の関数は、ページが プリレンダリング中 であるか、すでにプリレンダリング済みかどうかを確認するために使用できます。

function pagePrerendered() {
  return (
    document.prerendering ||
    self.performance?.getEntriesByType?.("navigation")[0]?.activationStart > 0
  );
}

ユーザー体感パフォーマンスのマイルストーンを測定する

プリレンダリングされたページでは、実際にナビゲーションされる前にページが生成されている場合があります。プリレンダリングされたページで Performance API を使用する際は、誤解を招く測定を避けるために、返された値を activationStart と比較することが不可欠です。

// アクティベーションが発生した時刻
let activationStart =
  performance.getEntriesByType("navigation")[0].activationStart;

// 初回描画までの時間
let firstPaint = performance.getEntriesByName("first-paint")[0].startTime;

// 初回コンテンツ描画までの時間
let firstContentfulPaint = performance.getEntriesByName(
  "first-contentful-paint",
)[0].startTime;

console.log(`time to first paint: ${firstPaint - activationStart}`);
console.log(
  `time to first-contentful-paint: ${firstContentfulPaint - activationStart}`,
);