Chrome 新 API：仅六行 HTML！页面秒开！

Speculation Rules API：浏览器原生的“预判”黑科技

页面跳转时的加载等待，一直是多页面应用（MPA）体验上的一个痛点。有没有办法能让下一页“秒开”？现在，浏览器自己给出了答案——Speculation Rules API。这套原生接口的核心逻辑非常直观：它尝试预判用户下一步可能点击哪里，然后提前在后台默默加载好目标页面的资源。这样一来，当用户真的点击时，跳转的等待时间就被极大地抹平了，甚至能达到无感切换的效果。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

简单来说，它的目标就是：提前为你备好下一页，当你点下链接的瞬间，新页面已然就绪，实现近乎瞬时的跳转体验。

图片

两种核心预加载模式，分清场景不踩坑

想要用好它，首先得弄清楚它的两种工作模式。选对了场景，才能事半功倍，避免不必要的资源消耗。

1、Prefetch（资源预取）

这是一种相对“轻量”的模式。它只会预先获取下一页的HTML文档本身，而不会去加载CSS、Ja vaScript、图片等附属资源，更不会执行任何脚本或进行渲染。

优点显而易见：占用带宽少，对用户设备性能的影响也微乎其微。
那么它适合用在哪儿？ 最适合那些用户有较大概率访问，但并非百分之百确定的页面。比如，文章列表的“下一页”、侧边栏的导航链接，或者搜索结果中靠前的条目。用有限的资源，博取一个可观的体验提升。

2、Prerender（页面预渲染）

这可以说是“完全体”的预加载。它不仅会下载HTML，还会加载所有关联的静态资源，执行Ja vaScript，并在一个隐藏的标签页中完成整个页面的渲染工作。

带来的好处是极致的：跳转时几乎零延迟，体验可以媲美单页面应用（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>

这段代码做了两件事：一是通过prefetch规则，明确指定几个页面进行轻量级的资源预取；二是通过prerender规则，设置一个自动匹配逻辑，为全站符合条件的链接启用预渲染，同时巧妙地排除了如退出登录、加购等不希望被预加载的敏感或动态页面。

三种部署方式，适配不同业务

不同的技术架构，可以选择最适合自己的集成方式。

1、静态内嵌（适合静态站点/博客）

这就是上面示例采用的方式，直接将JSON规则嵌入到HTML的`<script>`标签中。这种方式部署起来最简单，几乎不需要额外的开发成本，非常适合静态站点或博客系统。

2、JS 动态兼容部署（优雅降级）

考虑到浏览器兼容性，更稳健的做法是动态判断。如果浏览器支持原生API，就使用Speculation Rules；如果不支持，则优雅地降级到传统的``方案。

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文件中是更佳的选择。通过服务器在响应头中指定规则文件路径，可以实现规则的集中管理、动态更新和灰度发布。

首先，在服务器配置中添加响应头：

然后，在`/rules.json`文件中定义规则：

{
  "prefetch": [
    {
      "source": "list",
      "urls": ["/about", "/products"],
      "eagerness": "moderate"
    }
  ],
  "prerender": [
    {
      "source": "list",
      "urls": ["/checkout"],
      "eagerness": "eager"
    }
  ]
}