Chrome 新 API：Speculation Rules API，仅 6 行 HTML 页面秒开！

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2026年1月31日 13:41 本文热度 61

如果你也厌倦了页面里无穷无尽的 loading 动画，那这个东西你真的可以看一眼。

最近 Chrome 内置了一个新能力：Speculation Rules API。

不需要框架、不需要 JS，甚至不需要你改现有业务逻辑，只要写几行声明式 HTML，就能明显改善页面跳转时的体验。

🔑 核心：让浏览器提前做判断

我们平时的页面跳转流程都很熟悉：

用户点击链接 → 浏览器开始请求 → 下载资源 → 执行脚本 → 页面渲染完成

Speculation Rules API 并没有改变这件事本身，它只是把这条链路往前挪了一点点。

当浏览器判断用户“很可能”会点某个链接时，它不会等到点击真的发生，而是提前开始准备。

等用户真正点下去的时候，页面要么已经在缓存里了，要么干脆已经在后台跑完了。

🚀 6 行代码，直接生效

Speculation Rules API 的使用方式，比你想象中简单得多。

你只需要把下面这段代码放进页面的 <head>：

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

加完之后，浏览器会自动扫描当前页面里的所有链接。

当用户悬停或聚焦到某个链接时，后台就会开始预渲染对应的页面。

在很多页面跳转场景下，点击之后几乎是“秒切”，你甚至会怀疑是不是哪里少了一个 loading。

⚙️ 两种模式，理解清楚就够了

这个 API 本质上只有两种用法。

第一种是 prefetch：

浏览器会提前把目标页面的 HTML、JS、CSS 下载下来放进缓存，但不会执行页面逻辑。

这种方式资源消耗很低，几乎没有副作用，适合用来给整站做兜底。

第二种是 prerender：

浏览器会在后台完整加载并运行页面，脚本会执行，请求也会发出。

等你真正点击时，只是把已经运行好的页面切到前台。

也正因为这样，prerender 的体验最好，但使用时要更谨慎一些。

🎯 实际落地时，可以按三步来

第一步，先广撒网，用 prefetch 打底:

对站内同域链接启用 prefetch，网络开销很小，但能明显减少首次跳转的等待时间，基本没有风险。

第二步，只对高价值路径用 prerender:

比如商品页到结算页、文章到下一篇，这类用户高度确定会点的路径，prerender 的收益会非常明显。

第三步，跨域场景别忘了配响应头:

如果目标页面在其他域名下，需要返回Supports-Loading-Mode: credentialed-prerender，否则浏览器不会生效。

🕹️ eagerness 不用纠结，选对就行

触发时机一共就三档：

eager：链接一进入可视区就开始
moderate：悬停或聚焦时开始（默认，也是最均衡的）
conservative：鼠标按下才开始，最省资源

大多数场景下，直接用 moderate 就够了，不需要刻意调。

⚠️ 关于 Vue / React 单页应用，必须说清楚

Speculation Rules API 针对的是浏览器级的页面导航，也就是加载新的 HTML 文档。

而 Vue、React 的单页应用，内部路由切换本质是前端状态变化，并不会触发真正的文档加载。

所以它并不能直接加速 SPA 内部路由跳转。

但如果你的项目里存在多入口页面，或者会从 SPA 跳转到其他页面、其他系统，那这些“真实的页面跳转”场景依然非常适合使用这个 API。

🛡️ 使用时需要注意的几个点

如果页面一加载就会写数据库、发消息，或者对业务状态有影响，那就不适合用 prerender，只用 prefetch 会更安全。

对于强依赖登录态的页面，也建议提前做好权限判断，避免后台预渲染直接命中 401。

如果你有埋点或 PV 统计，记得区分预渲染和真实访问，可以通过监听 prerenderingchange 事件来处理。

是否生效，可以直接在 Chrome DevTools 的 Preloading 面板里查看，一眼就能确认。

🎖️ 写在最后

Speculation Rules API 做的事情其实并不复杂：

把等待时间，从「用户点击之后」，提前到「浏览器空闲的时候」。

它不是万能解法，但在合适的页面跳转场景下，确实能用极低的成本，换来非常直观的体验提升。

下次产品再跟你说要不要加 loading，你至少多了一个更优雅的选择。

阅读原文：原文链接

该文章在 2026/2/4 15:33:43 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。