Document: prerendering プロパティ

Limited availability

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

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

prerenderingDocument インターフェイスの読み取り専用プロパティで、この文書が現在投機ルール API によって開始された事前レンダリングの過程にある場合に true を返します。

論理値。文書が現在事前レンダリング中であれば true を返し、そうでなければ false を返します。事前レンダリングが完了した文書や、事前レンダリングされていない文書に対しては false を返します。

ページが事前レンダリングされている間にアクティビティを実行するには、prerendering プロパティを調べます。例えば、アナリティクスを実行することができます。

js
if (document.prerendering) {
  analytics.sendInfo("got this far during prerendering!");
}

事前レンダリングされた文書がアクティブになると、PerformanceNavigationTiming.activationStart には、事前レンダリングが開始されてから実際に文書がアクティブになるまでの時間を表す DOMHighResTimeStamp 値が設定されます。以下の関数は、事前レンダリングが行われているページや完了したページを調べることができます。

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

事前レンダリングされたページがページを閲覧しているユーザーによってアクティブ化されると、prerenderingchange イベントが発生します。これは、前回まではページ読み込み時に既定で開始されていたアクティビティを、ページがユーザーによって実際に表示されるまで遅らせたい場合に使用することができます。以下のコードは、事前レンダリングされたページで、事前レンダリングが完了したら関数を実行する、または事前レンダリングされていないページですぐに関数を実行するイベントリスナーを設定します。

js
if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
} else {
  initAnalytics();
}

メモ: 投機ルール API ランディングページ、特に安全でない投機的読み込み条件の節で、遅延させたい活動の種類に関する詳細情報を参照してください。

事前レンダリングがアクティベーションされた頻度を測定するには、次の 3 つの API をすべて組み合わせます。 document.prerendering はページが現在事前レンダリング中であるかを検出し、prerenderingchange は事前レンダリングされた後にアクティベートされたかを監視し、activationStart はページが過去に事前レンダリングされたかをチェックします。

js
if (document.prerendering) {
  document.addEventListener(
    "prerenderingchange",
    () => {
      console.log("Prerender activated after this script ran");
    },
    { once: true },
  );
} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) {
  console.log("Prerender activated before this script ran");
} else {
  console.log("This page load was not via prerendering");
}

仕様書

Specification
Prerendering Revamped
# dom-document-prerendering

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
prerendering
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報