配了三年多页应用，今天才发现它的跳转白屏根本不需要等——Speculation Rules 把这件事彻底变了

阿柯·前端架构 内容创作者 2026-09-06 12 阅读

多页应用每次点链接都要等一圈转完才出来下一个页面，这个体验已经 decades 没变过了。2026 年 Chrome 121 稳定的 Speculation Rules API，让浏览器在用户点击之前就把下一个页面加载好了——点哪页，哪页几乎是瞬间出现。

为什么传统预取不够用了

你可能早就知道 <link rel="prefetch">，它把下一个页面的 HTML 预先下载好。但点击的时候浏览器还得重新解析、执行 JavaScript、加载资源——白屏时间依然存在。

Speculation Rules 的 prerender 更激进：浏览器用隐藏标签页把整个页面加载并渲染完，包括 JS 执行和资源加载。用户点击时，浏览器直接把预渲染好的页面切进来，感知延迟从 200-500ms 降到 10ms 以内。

两行代码让导航即时完成

在页面 <head> 里加一段 JSON，浏览器就会自动按规则预渲染可能的导航目标：

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

source: "document" 告诉浏览器：把当前页面里所有同源链接都纳入预渲染目标。eagerness 控制触发时机：

  • conservative：用户点击/触摸时才触发，最保守
  • moderate：鼠标悬停 200ms 后触发，平衡速度和带宽，默认推荐
  • eager/immediate：链接一出现就触发，适合单路径转化漏斗

更精细的控制可以排除不需要预渲染的页面：

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/articles/*" },
        { "not": { "href_matches": "/checkout" } },
        { "not": { "href_matches": "/account/*" } }
      ]
    },
    "eagerness": "moderate"
  }]
}

为什么 INP 改善最明显

Core Web Vitals 里改善最大的是 INP（Interaction to Next Paint）——因为用户点击时页面已经渲染好了，浏览器只需要激活即可。实测数据：三个内容站平均 INP 从 98-145ms 降到 62-88ms。LCP 在第二页导航时改善约 28%。

对于内容型站点（博客、文档、电商列表页），这个 API 几乎零成本地把 MPA 导航体验拉到和 SPA 同一个水平。

三个必须知道的坑

第一，不要预渲染有副作用的页面。 登录页、购物车、个人中心这些页面预渲染时可能会触发未预期的请求或状态初始化。排除规则里把 /checkout、/account、/admin 等路径去掉。

第二，预渲染页面里的 JS 在隐藏上下文里执行。 如果你的页面有页面加载时立即执行的逻辑（比如自动弹窗、播放音频、发送统计事件），需要监听 prerenderingchange 事件：

document.addEventListener(prerenderingchange, () => {
  // 页面真正激活了，在这里初始化用户可见的逻辑
  sendAnalytics(page_view);
});

直接写在这里面，而不要写在脚本顶层。

第三，目前只有 Chromium 浏览器支持。 Chrome 109+、Edge 109+、Opera 95+ 支持预渲染，Firefox 和 Safari 会忽略这些规则——没有副作用，只是降级成普通导航。所以把它当作渐进增强而不是必须依赖的功能。

三个下一步

  1. 审计你的站点导航结构：找出用户最常走的几条路径（首页 → 文章列表 → 文章详情），在这些入口页加上 moderate 预渲染规则
  2. 加上 View Transitions 动画：配合 CSS view-transition-name 让页面切换有原生级变形效果，两者结合 MPA 导航体验接近 SPA
  3. 用 DevTools 验证：Chrome DevTools → Application → Speculative Loads 面板能看到每条规则匹配了多少链接、预渲染是否成功

评论区

0 条评论

登录后可评论。

阿柯·前端架构 12 阅读