页面秒开、预渲染------Chrome 新增的 Speculation Rules API

Ai 摘要：Chrome的Speculation Rules API通过`<script type="speculationrules">`让开发者以JSON规则声明需预加载的页面。它支持prefetch（仅下载资源）和prerender（完整渲染页面）两种模式，能显著提升页面切换速度。该API相比传统预加载方案更灵活安全，但需注意避免JS执行副作用，且目前仅Chromium系浏览器支持。

为什么要用 speculationrules

以前我们有一些优化页面加载速度的方法：

<link rel="prefetch"> → 提前获取资源，但不执行。
<link rel="prerender"> → 可以完整预加载页面，但限制很多（已被废弃）。

新的 Speculation Rules API 统一并升级了这个能力：
👉 允许开发者用 JSON 规则明确告诉浏览器 哪些 URL 值得预加载，而不是靠浏览器自己猜。

语法

<script type="speculationrules">
{
  "prefetch": [ ... ],
  "prerender": [ ... ]
}
</script>

两种模式

prefetch

只下载页面和资源，但不执行脚本。
适合低成本的预热（比如用户可能会点的下一个分页）。

prerender

完整渲染目标页面，包括执行 JS、建立 DOM。
用户点击时几乎是“秒开”，但成本更高。

配置规则字段

一个规则对象常见字段有：

字段	说明
source	来源类型，可选："list" （明确给出 URL 列表）、"document" （从当前文档链接自动推断）
urls	需要预加载的 URL 列表（仅在 source: "list" 时使用）
eagerness	预加载积极程度：conservative （保守）、moderate （适中）、eager （积极）

示例 1：指定列表

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

示例 2：自动推断

<script type="speculationrules">
{
  "prerender": [
    { "source": "document", "eagerness": "moderate" }
  ]
}
</script>

👉 浏览器会根据页面里的 <a> 链接和用户行为自动决定哪些链接预渲染。

注意事项

执行副作用
prerender 会执行目标页面 JS，可能触发 API 请求，要避免数据污染（比如重复下单）。
安全限制

不能预渲染跨域页面。
不能带有副作用的请求（POST 等）。
某些敏感页面（登录页、支付页）浏览器会自动拒绝预渲染。

支持情况

Chrome 96+ 已支持基本功能，后续不断完善。
Firefox/Safari 目前不支持。

总结

type="speculationrules" 提供了一种 声明式 JSON 配置，让浏览器按需 预取 (prefetch) / 预渲染 (prerender) 页面。
相比旧的 <link rel="prerender">，更安全、更灵活。
使用场景：搜索结果 → 详情页、文章列表 → 下一篇、分页导航等。

示例

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Speculation Rules Demo - 首页</title>
</head>
<body>
  <h1>首页</h1>
  <p>这个页面会预渲染 <code>http://127.0.0.1:5500/htmls/speculation-api/next.html</code></p>

  <!-- 链接到下一页 -->
  <a href="http://127.0.0.1:5500/htmls/speculation-api/next.html">前往下一页（应该是秒开）</a>

  <!-- Speculation Rules 预渲染规则 -->
  <script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["http://127.0.0.1:5500/htmls/speculation-api/next.html"]
      }
    ]
  }
  </script>
</body>
</html>

<!-- next.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Speculation Rules Demo - 下一页</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px;
    }
    .gallery img {
      width: 100%;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <h1>下一页 - 图片画廊</h1>
  <p>如果你是从首页点进来的，图片应该瞬间显示 🎉</p>
  <a href="http://127.0.0.1:5500/htmls/speculation-api/index.html">返回首页</a>

  <div class="gallery">
    <!-- 放很多大图 -->
    <img src="https://picsum.photos/1200/800?random=1" alt="img1">
    <img src="https://picsum.photos/1200/800?random=2" alt="img2">
    <img src="https://picsum.photos/1200/800?random=3" alt="img3">
    <img src="https://picsum.photos/1200/800?random=4" alt="img4">
    <img src="https://picsum.photos/1200/800?random=5" alt="img5">
    <img src="https://picsum.photos/1200/800?random=6" alt="img6">
    <img src="https://picsum.photos/1200/800?random=7" alt="img7">
    <img src="https://picsum.photos/1200/800?random=8" alt="img8">
    <img src="https://picsum.photos/1200/800?random=9" alt="img9">
    <img src="https://picsum.photos/1200/800?random=10" alt="img10">
  </div>
</body>
</html>

这有两个html，可以用vscode启动一下server，将地址换到 <a> 标签中。
当我打开首页，刷新一下可以看到有资源被提前加载了

同样我们也可以在最新版浏览器DevTools → Application → Prerender中看到结论

打开我们的第二个页面也是能够秒加载