文档：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 |
浏览器兼容性
加载中…