Speculation Rules API 预渲染与 No-Vary-Search 实战

Speculation Rules API 预渲染与 No-Vary-Search 实战概述Speculation Rules API 允许以声明方式进行预取与预渲染配置。Chrome/Edge 已支持（含缓存复用改进与 eagerness 策略）；No-Vary-Search 允许浏览器忽略对内容无影响的查询参数，实现跨变体缓存复用。关键参数/概念（已验证）`<script type="speculationrules">{ ... }`：声明 prerender/prefetch 规则。- `eagerness: conservativemoderateeager`：控制触发时机（Chrome 桌面 200ms hover 等）。`expects_no_vary_search`：预期服务端返回 No-Vary-Search 以提升缓存复用。`Supports-Loading-Mode: credentialed-prerender`：同站跨源预渲染需显式声明。实践/示例<script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/products/*" }, "eagerness": "moderate", "expects_no_vary_search": true }], "prefetch": [{ "where": { "href_matches": "/blog/*" }, "eagerness": "conservative" }] } </script> 服务器配置（No-Vary-Search）：No-Vary-Search: params="utm_*", key-order=*; vary-on-key-order=false 验证方法DevTools Network/Speculation Rules 面板检查规则命中与缓存复用情况。统计导航耗时与 LCP，比较开启/关闭 prerender 的差异。针对有副作用的页面（登录、支付、广告计数）禁用预渲染并做白名单控制。注意事项预渲染页面不得产生副作用（写入存储、上报曝光），否则影响用户当前会话。跨源预渲染需服务端 opt-in（Supports-Loading-Mode），谨慎评估安全与合规。与 MPA/SPA 的路由策略协同，避免与 View Transitions 的状态流冲突。参考资料MDN：Speculation Rules APIChrome Docs：Prerender pages、Improvements to Speculation Rules、No-Vary-Search