文档：prerenderingchange 事件
当预渲染的文档被激活（即用户查看该页面）时，会在该文档上触发 prerenderingchange 事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("prerenderingchange", (event) => { })
onprerenderingchange = (event) => { }
事件类型
一个通用的 Event。
示例
阻止在预渲染期间运行代码
此示例展示了如何将原本会在预渲染期间运行的代码延迟到页面激活后执行。这对于延迟分析代码很有用，因为分析代码只有在用户实际查看页面时才相关。
代码使用 Document.prerendering 检查预渲染是否正在进行，如果正在进行，则添加一个事件监听器，在页面激活后运行分析初始化函数。对于未进行预渲染的页面，分析代码会立即运行。
js
if (document.prerendering) {
document.addEventListener("prerenderingchange", initAnalytics, {
once: true,
});
} else {
initAnalytics();
}
请注意，不应使用此类代码来衡量预渲染的激活次数，因为代码可能会在预渲染页面已经激活后才运行。
注意： 有关您可能希望延迟到预渲染完成后执行的操作类型的更多信息，请参阅 Speculation Rules API 登陆页面，特别是 不安全的推测性加载条件 部分。
衡量预渲染激活次数
此代码展示了如何衡量预渲染的激活次数。它使用 prerenderingchange 来跟踪激活事件，并使用 Performance.getEntriesByType() 来跟踪导航激活。
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");
}
规范
| 规范 |
|---|
| 预渲染改版 # eventdef-document-prerenderingchange |
| 预渲染改版 # dom-document-onprerenderingchange |
浏览器兼容性
加载中…