Speculation Rules：预渲染与预取策略治理

概述Speculation Rules 以声明式方式配置页面的预渲染（prerender）与预取（prefetch），在同源范围内提升路由切换性能。浏览器根据规则与启发式决定执行与资源隔离。用法/示例<script type="speculationrules">

{

"prerender": [

{ "source": "list", "urls": ["/product/42", "/dashboard"] }

],

"prefetch": [

{ "source": "document", "eagerness": "moderate" }

]

}

</script>

在新页面检测预渲染态并延后副作用：if (document.prerendering) {

addEventListener('prerenderingchange', () => {

// 页面已激活，可进行统计/副作用

})

}

工程建议仅对同源、无副作用或副作用可延后的页面进行预渲染。在预渲染阶段避免写入存储与上报分析，待激活后再执行。与缓存治理配合，避免因参数差异导致资源泛化与浪费。参考与验证web.dev：Speculation Rules — https://web.dev/articles/speculation-rulesChrome Docs：Prerender — https://developer.chrome.com/docs/web-platform/prerender-pages/