Speculation Rules API 是浏览器原生提供的性能优化接口。核心逻辑很简单：预判用户下一步点击行为，提前加载页面资源，抹平页面跳转等待时间，专治 MPA（多页面应用）跳转慢、加载卡的问题。
简单来说：提前备好下一页，用户点链接，页面直接秒开，无感跳转。
两种核心预加载模式，分清场景不踩坑
1、Prefetch（资源预取）
只拉取页面 HTML 文件，不加载 CSS、JS、图片等附属资源，不执行渲染和脚本。
- 优点：占用带宽少、能耗低
- 适用场景：用户大概率但不一定访问的页面，比如列表下一页、侧边导航链接
2、Prerender（页面预渲染）
完整版预加载：下载 HTML + 加载所有静态资源 + 执行 JS + 完成页面全屏渲染。
- 优点：跳转零延迟，体验接近 SPA
- 缺点：消耗带宽和性能更高
- 适用场景：用户几乎一定会访问的页面，比如电商结账页、登录后的首页
零基础上手：基础配置示例
一段代码同时实现预取 + 预渲染，开箱即用：
<script type="speculationrules">
{
// 批量预取指定页面
"prefetch": [
{
"urls": ["/next.html", "/next2.html"],
"requires": ["anonymous-client-ip-when-cross-origin"],
"referrer_policy": "no-referrer"
}
],
// 自动匹配链接预渲染，过滤无效页面
"prerender": [
{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } },
{ "not": { "selector_matches": ".no-prerender" } },
{ "not": { "selector_matches": "[rel~=nofollow]" } }
]
}
}
]
}
</script>
解读：锁定两个基础能力，指定页面轻量化预取，全站合规链接自动预渲染，排除退出、加购等敏感页面。
三种部署方式，适配不同业务
1、静态内嵌（适合静态站点/博客）
就是上面的示例，直接在 HTML 嵌入 JSON 规则，部署简单，零开发成本。
2、JS 动态兼容部署（优雅降级）
判断浏览器是否支持原生接口，支持则走 Speculation Rules，不支持则降级为传统 link 预取：
if (HTMLScriptElement.supports && HTMLScriptElement.supports("speculationrules")) {
const specScript = document.createElement("script");
specScript.type = "speculationrules";
specScript.textContent = JSON.stringify({
"prefetch": [
{
"source": "list",
"urls": ["/next.html"]
}
]
});
document.body.appendChild(specScript);
} else {
// 降级方案
const link = document.createElement("link");
link.rel = "prefetch";
link.href = "/next.html";
document.head.appendChild(link);
}
3、响应头外部引入（适合动态业务）
规则单独存为 JSON 文件，通过服务器响应头挂载，方便统一更新、灰度发布。
- 服务器配置响应头：
Speculation-Rules: "/rules.json" - 规则文件示例：
{
"prefetch": [
{
"source": "list",
"urls": ["/about", "/products"],
"eagerness": "moderate"
}
],
"prerender": [
{
"source": "list",
"urls": ["/checkout"],
"eagerness": "eager"
}
]
}
