Speculation Rules 预渲染与预取：规则配置、风险控制与指标验证

Speculation Rules 预渲染与预取：规则配置、风险控制与指标验证技术背景Speculation Rules 允许站点以声明式方式指示浏览器进行预取（prefetch）与预渲染（prerender），在用户可能访问的页面提前准备，从而显著降低导航与首屏时间。需要谨慎控制触发条件与隐私风险。核心内容规则配置（HTML）<script type="speculationrules">

{

"prefetch": [

{ "source": "document", "href": "/category" },

{ "source": "list", "urls": ["/products/1", "/products/2"], "eagerness": "moderate" }

],

"prerender": [

{ "source": "document", "href": "/checkout", "eagerness": "conservative" }

]

}

</script>

触发与取消（JS 辅助）// 根据用户行为动态注入规则（示意）

function addPrerender(url: string) {

const rules = { prerender: [{ source: 'list', urls: [url], eagerness: 'moderate' }] } as any;

const el = document.createElement('script');

el.type = 'speculationrules';

el.textContent = JSON.stringify(rules);

document.head.appendChild(el);

}

风险控制与隐私- 对登录/支付等敏感页面使用保守策略或禁用预渲染

- 结合 Permissions Policy 与 CSP 限制第三方脚本影响

- 使用 `eagerness` 控制触发强度（conservative/moderate/eager）

技术验证参数在 Chrome 128/Edge 130（支持 SR 的环境）下：导航 TTFB：下降 20–45%首屏可见时间：下降 15–35%误触发率（不必要预渲染）：≤ 5%应用场景导航预测明确的内容站点与电商列表→详情结算等关键流程的保守预渲染最佳实践仅对高概率路径启用，避免带宽浪费与 Priority Hints/Preload/Preconnect 协同调度持续监控效果并调整规则与触发条件