文件：prerendering 屬性
Document 介面的只讀屬性 prerendering。當文件透過 Speculation Rules API 啟動的預渲染（prerendering）過程當前正在進行時，此屬性返回 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();
}
注意： 有關您可能希望延遲的活動型別的更多資訊，請參閱 Speculation Rules API 的主頁，特別是 不安全的推測性載入條件 部分。
要衡量預渲染被啟用的次數，請結合使用這三個 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");
}
規範
| 規範 |
|---|
| 預渲染改版 # dom-document-prerendering |
瀏覽器相容性
載入中…