如果你也厌倦了无穷无尽的 loading 动画，今天介绍的 Speculation Rules API 能让你瞬间解脱。
它内置于所有现代 Chromium 浏览器（Chrome/Edge/Brave 等），不依赖任何框架！
只要写 6 行声明式 HTML，就能让页面“看起来比用户还懂用户”。
🔑 核心原理：让浏览器做“预测”
模式 | 做了什么 | 资源消耗 | 副作用 |
|---|---|---|---|
| Prefetch | 提前下载 | 低 | 无 |
| Prerender | 在后台完整跑完页面（脚本、API 全跑） | 高 | 可能有 |
🚀 6 行代码，直接生效
把下面这段放进 <head>，立刻启用 moderate 级别的 prerender：
<script type="speculationrules">
{
"prerender": [{ "source": "document", "eagerness": "moderate" }]
}
</script>浏览器会自动扫描当前页面所有链接，当用户 悬停 或 聚焦 时，后台就开始预渲染。
🎯 三步落地，零成本迭代
广撒网：prefetch 做兜底
对整站同域链接先启用 prefetch，网络开销极低：
{ "prefetch": [{ "source": "document", "eagerness": "moderate" }] }重点捕捞：prerender 高价值路径
例如商品 → 结账、文章 → 下一篇：
{
"prerender": [{
"source": "document",
"where": { "href_matches": "/checkout" },
"eagerness": "eager"
}]
}跨域别忘了加响应头
如果目标站点是b.example，需返回：
Supports-Loading-Mode: credentialed-prerender🕹️ 三档触发时机（eagerness）
eager 链接一进可视区就开干
moderate 悬停或聚焦再干（默认，最均衡）
conservative 鼠标按下才干（最省资源）
🛡️ 避坑指南
场景 | 建议 |
|---|---|
页面加载会写数据库 / 发消息 | 用 prefetch，别 prerender |
需要登录态 | 提前校验，避免预渲染 401 |
有埋点 / PV 统计 | 监听 |
不确定是否生效 | Chrome DevTools → Preloading 面板实时查看 |
🎖️ 一句话总结
把等待时间从「用户侧」转移到「浏览器空闲时间」，这就是 Speculation Rules API 的全部魔法。
下次产品说“再加个 loading 动画”时，直接把这篇文章甩给他 —— 然后优雅地附上那 6 行 HTML。
参考链接：
https://medium.com/@fireprogrammer/make-any-app-load-faster-with-just-6-lines-of-html-fe091cb9fdf6
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
