Speculation Rules API 如何安全预渲染下一页

我第一次把下一篇文章页交给浏览器预渲染时，页面确实变得接近瞬开，但很快发现一个容易忽略的事实：prerender 不只是提前下载 HTML，它还会加载子资源并运行 JavaScript。安全用法不是“把所有链接都加速”，而是只给高概率、只读、能在激活后刷新状态的同源文档使用预渲染。

官方文档：https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API

先选对下一页，再决定是否 prerender

Speculation Rules API 面向文档导航，更适合多页应用。prefetch 主要提前拿到目标文档响应体；prerender 还会加载资源、执行脚本并把页面放在不可见的上下文中，命中后可以直接激活。因此后者的网络和内存成本明显更高，猜错一次就可能浪费一整页资源。

我的选择顺序是：列表页到详情页、文章页到下一篇这类“用户大概率点击且目标以读取为主”的场景才考虑预渲染；带有登出、加购、发送验证码、扣减额度、广告转化或写入状态的 URL，一律从候选集中剔除。带用户身份、购物车或实时库存的页面也不能假定预渲染内容永远新鲜，激活后必须刷新。

用能力检测和规则筛选控制候选范围

规则可以写在内联的 script type="speculationrules" 中，也可以由 Speculation-Rules 响应头指向 JSON 文件。下面的内联 JSON 保持严格 JSON，不在其中塞注释；where 负责保留文章和商品详情链接，同时排除会改变状态的路径、查询参数和带 no-prerender 标记的链接。

如果站点有严格的 CSP，需要在 script-src 中允许 inline-speculation-rules，或改用哈希、nonce 与响应头文件。能力检测可以让旧浏览器走普通导航或较轻量的 link rel="prefetch"：

if (HTMLScriptElement.supports?.("speculationrules")) {
  // 中文注释：仅在浏览器识别规则 API 时插入预取提示。
  const script = document.createElement("script");
  script.type = "speculationrules";
  script.textContent = JSON.stringify({
    prefetch: [{ source: "list", urls: ["/article/next.html"] }]
  });
  document.head.append(script);
} else {
  // 中文注释：能力不足时保留普通浏览器导航，不阻塞用户点击。
  const link = document.createElement("link");
  link.rel = "prefetch";
  link.href = "/article/next.html";
  document.head.append(link);
}

把副作用挡在服务端和激活边界之外

预渲染请求会带 Sec-Purpose: prefetch;prerender。服务端可以用它区分“浏览器正在猜”与“用户已经打开”，对前者只返回安全的只读页面，或暂缓一次性动作。不要把这个判断当作鉴权；真正的写操作仍应使用 POST、CSRF 防护和业务权限校验。

页面脚本也要认识到自己可能正在不可见状态运行。分析上报、写入 localStorage、读取依赖用户最新动作的数据，都可以等到激活后再做：

function startUserOnlyWork() {
  // 中文注释：这里只放真实可见后才允许发生的分析或个性化刷新。
  refreshUserState();
  sendPageView();
}

if (document.prerendering) {
  // 中文注释：预渲染阶段不写入用户状态，激活时只执行一次。
  document.addEventListener("prerenderingchange", startUserOnlyWork, {
    once: true
  });
} else {
  // 中文注释：普通导航没有等待阶段，立即执行相同的激活逻辑。
  startUserOnlyWork();
}

在服务端还要注意过期数据和跨标签页身份变化。例如用户在另一页刚登录，已经生成的预渲染文档可能仍是未登录视图。最稳妥的办法是在激活后重新请求用户相关数据；如果状态变化必须主动清理缓存，可以按站点策略使用 Clear-Site-Data 的预取或预渲染缓存指令。

上线前用一张清单判断是否适合

实际接入时先从 prefetch 开始，确认候选 URL 没有副作用，再对少量高概率入口升级为 prerender。浏览器可能因内存、电量、数据节省设置或自身启发式策略不执行提示，所以它应当是加速层，不是业务流程的一部分。

常见问题

Speculation Rules API 能替代 SPA 的路由预加载吗？

不能完全替代。它面向文档 URL，SPA 内部路由和资源级预加载仍需要应用自己的数据、代码分包或资源缓存策略。

为什么预渲染后的页面还要重新拉取用户数据？

因为预渲染发生在用户点击之前，登录状态、购物车和实时内容可能已经变化。激活后刷新能避免把旧视图当成最新状态。

只设置 Sec-Purpose 就安全吗？

不安全。它只能帮助识别推测性请求，不能替代权限、CSRF 或幂等设计；所有改变数据的接口仍要按正常安全边界保护。