是 Chromium 系列浏览器（Chrome/Edge 等）引入的新特性，属于 Speculation Rules API，用于告诉浏览器 哪些页面可以被提前加载（prefetch 或 prerender），从而提升页面切换速度。

为什么要用 speculationrules

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

  • → 提前获取资源，但不执行。
  • → 可以完整预加载页面，但限制很多（已被废弃）。

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

语法

{ "prefetch": [ ... ], "prerender": [ ... ] } 两种模式prefetch只下载页面和资源，但不执行脚本。适合低成本的预热（比如用户可能会点的下一个分页）。prerender完整渲染目标页面，包括执行 JS、建立 DOM。用户点击时几乎是“秒开”，但成本更高。配置规则字段一个规则对象常见字段有：

来源类型，可选："list"

（明确给出 URL 列表）、"document"

（从当前文档链接自动推断）

需要预加载的 URL 列表（仅在 source: "list"

时使用）

预加载积极程度：conservative

（保守）、moderate

（适中）、eager

（积极）

示例 1：指定列表

{ "prerender": [ { "source": "list", "urls": ["/next-page.html", "/product/123"] } ] } 示例 2：自动推断 { "prerender": [ { "source": "document", "eagerness": "moderate" } ] } 👉 浏览器会根据页面里的 链接和用户行为自动决定哪些链接预渲染。

注意事项

  • 执行副作用 prerender 会执行目标页面 JS，可能触发 API 请求，要避免数据污染（比如重复下单）。
  • 安全限制
  • 不能预渲染跨域页面。
  • 不能带有副作用的请求（POST 等）。
  • 某些敏感页面（登录页、支付页）浏览器会自动拒绝预渲染。
  • 支持情况
  • Chrome 96+ 已支持基本功能，后续不断完善。
  • Firefox/Safari 目前不支持。

总结

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

示例

Speculation Rules Demo - 首页

首页 这个页面会预渲染 http://127.0.0.1:5500/htmls/speculation-api/next.html

前往下一页（应该是秒开）

{ "prerender": [ { "source": "list", "urls": ["http://127.0.0.1:5500/htmls/speculation-api/next.html"] } ] }

Speculation Rules Demo - 下一页

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); }

下一页 - 图片画廊 如果你是从首页点进来的，图片应该瞬间显示 🎉 返回首页

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

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

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