Speculation Rules API 是 Chromium 原生支持的声明式预渲染机制，仅需六行 HTML 即可在用户悬停或聚焦链接时静默预渲染目标页，支持路径匹配、跨域控制与自动降级，目前兼容 Chrome 120+ 等 Blink 内核浏览器。
Speculation Rules API 是 Chromium 系统原生支持的轻量级预加载机制，它不依赖 JavaScript，仅靠六行声明式 HTML 就能让浏览器在用户悬停或聚焦链接时，自动在后台静默预渲染目标页面——整个过程对用户完全无感，点击后几乎瞬开。
核心配置：六行 HTML 即生效
将以下代码插入页面 <head> 中即可启用中等优先级的预渲染：
<script type="speculationrules">
{
"prerender": [
{ "source": "document", "eagerness": "moderate" }
]
}
</script>
- “moderate” 表示：仅当用户鼠标悬停（hover）或键盘聚焦（focus）到链接上时才触发预渲染，兼顾性能与命中率
- 无需指定具体 URL，浏览器会自动扫描当前页所有符合规范的
<a href>链接 - 预渲染全程在隔离的后台进程完成，不影响当前页面运行、不触发目标页 JS 执行、不播放媒体、不发送分析请求
精准控制预加载范围
若只想预渲染特定路径（比如只预载 /blog/ 或 /product/ 下的页面），可改用匹配规则：
立即学习“前端免费学习笔记（深入）”；
<script type="speculationrules">
{
"prerender": [
{
"where": { "href_matches": "/blog/.*" },
"eagerness": "moderate"
}
]
}
</script>
-
href_matches支持正则语法（如/blog/.*、^https://example.com/contact） - 可同时配置
prefetch字段，为不支持 prerender 的资源（如图片、字体）提前拉取 - 多个规则按数组顺序执行，建议把高转化率路径放在前面
兼容性与安全边界
该能力目前仅在 Chrome 120+、Edge 120+、Brave 等基于 Chromium 的现代浏览器中可用；Safari 和 Firefox 尚未实现。使用时需注意：
- 跨域链接默认不预渲染，除非目标页明确返回
Permissions-Policy: speculation-rules=()响应头 - 含敏感操作的页面（如支付确认页、表单提交页）会被浏览器自动排除，无需手动过滤
- 用户开启“节省数据”模式或处于低功耗状态时，预渲染会自动降级为 prefetch 或完全暂停
验证是否生效
打开 Chrome DevTools → Network 标签页 → 勾选 “Large resources” 和 “Preload” → 悬停任意链接，观察是否出现 prerender 类型的请求条目；也可在 Application → Rendering 中开启 “Paint flashing”，预渲染完成时对应区域会有短暂高亮提示。
