Chrome 新 Speculation Rules API：仅 6 行 HTML！页面秒开！
最近 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，你至少多了一个更优雅的选择。
以上关于Chrome 新 Speculation Rules API：仅 6 行 HTML！页面秒开！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Chrome 新 Speculation Rules API：仅 6 行 HTML！页面秒开！
