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 协同调度持续监控效果并调整规则与触发条件