当前位置：首页 > web >正文

Speculation Rules API

web 2025/8/30 5:36:13

Speculation Rules API 提供了一种标准化、声明式的方法，让开发者能指导浏览器利用空闲时间或根据用户行为（如悬停），智能地预加载或预渲染下一个页面，从而将传统的“点击-等待-加载”体验升级为“点击-瞬间展现”的极致流畅体验。

为什么需要它？解决了什么问题？

在它出现之前，我们优化下一页加载的方式主要有：

<link rel="preload">：预加载关键资源（如脚本、字体），但仅限于当前页面。
<link rel="prefetch">：低优先级地获取未来可能需要的资源（如下一个页面的 JS 文件），但不执行或渲染它们。
用 JavaScript 和 Mouseover/Mousedown 事件来模拟预加载，但这很复杂且容易出错。

这些方法不够强大，无法实现真正的预渲染——即在用户点击之前，在后台完全加载、解析甚至渲染整个页面。

Speculation Rules API 的目标就是填补这个空白，让原生、高效的预渲染成为可能。

工作原理与语法

你需要在 HTML 中通过一个 <script type="speculationrules"> 标签来定义规则。规则目前主要支持两种模式：

1. 预获取 (`prefetch`)

这类似于 rel="prefetch"，但更强大。它会提前获取页面所需的资源（HTML、JS、CSS等），并将其放入 HTTP 缓存中。当用户真正导航时，大部分资源已经从磁盘加载，速度极快。

<script type="speculationrules">
{"prefetch": [{"source": "list","urls": ["/product/123", "/about.html"],// 可选：需要时再触发预取的条件"requires": ["anonymous-client-ip-when-cross-origin"] }]
}
</script>

2. 预渲染 (`prerender`)

这是“大招”。它不仅仅下载资源，还会在后台完整地渲染整个页面，包括执行 JavaScript、发起 API 调用、渲染布局等。当用户点击链接时，浏览器几乎可以立即切换到一个已经准备好的、活生生的页面，实现“瞬时导航”。

<script type="speculationrules">
{"prerender": [{"source": "list","urls": ["/next-article.html"]}]
}
</script>

更常见和强大的用法是基于文档的规则，根据当前页面的链接动态推测：

<script type="speculationrules">
{"prerender": [{"source": "document",// 预渲染与当前页面同源的用户可能点击的链接"where": { "href_matches": "/products/*" // 可以是CSS选择器，如 "a[rel='prerender']"},// 只有在认为有足够理由时（如鼠标悬停）才启动预渲染"eagerness": "moderate" }]
}
</script>

关键配置：`eagerness` (急切程度)

这个参数控制浏览器何时执行推测操作，对于性能优化至关重要：

"immediate"：立即执行。适用于你非常确定用户会访问的页面（如“下一步”按钮）。
"eager"：在空闲时很快执行。
"moderate" (默认)：在强烈的用户信号（如 mousedown 或 hover 一段时间）后执行。这是平衡资源和收益的最佳选择。
"conservative"：只在非常强烈的信号（如点击开始但尚未释放的 mousedown 事件）后执行。

好处与优势

极致的用户体验：实现真正的“瞬时加载”，感觉就像在使用一个单页面应用 (SPA)，而无需其复杂性。
更高的 Core Web Vitals 分数：大幅改善 LCP (最大内容绘制) 和 INP (交互下次延迟) 指标。
开发者友好：只需几行 JSON 配置，无需复杂的 JavaScript 逻辑。
资源智能管理：浏览器会自动管理预渲染的页面，如果内存不足或用户从未访问，会优雅地丢弃它们，避免浪费资源。
更好的隐私保护：与第三方 cookie 无关，规则遵循同源策略和用户设置（如省流模式）。

注意事项与最佳实践

资源消耗：预渲染，尤其是 prerender，会消耗额外的 CPU、网络和内存。必须谨慎使用 eagerness 并只用于高概率的导航。不要预渲染太多页面！
状态管理：预渲染的页面可能会发起 API 调用。确保这些调用是幂等的，或者使用虚拟数据，以免在用户真正访问前就改变了服务器状态（例如，不小心创建了订单）。
浏览器支持：这是一个渐进增强的功能。首先在 Chromium 内核的浏览器（Chrome, Edge, Opera等）中实现和支持。始终要检查支持情况。
测试工具：
- Chrome DevTools > Application > Speculation Rules 面板可以查看规则状态和预渲染的页面。
- chrome://predictors 可以查看 Chrome 自身的预测逻辑。
用例：
- 高概率单步导航：如“下一步”、“继续购物”按钮。
- 无限滚动列表中的下一页。
- 搜索引擎结果页 (SERP) 的第一个结果。
- 用户悬停停留超过 200ms 的链接。