Chrome 全新 API：仅 6 行 HTML！让页面秒开！
V
小4子约 2 分钟
小4子约 2 分钟如果你也厌倦了无穷无尽的 loading 动画，今天介绍的 Speculation Rules API 能让你瞬间解脱。
它内置于所有现代 Chromium 浏览器（Chrome/Edge/Brave 等），不依赖任何框架！
只要写 6 行声明式 HTML，就能让页面“看起来比用户还懂用户”。
🔑 核心原理：让浏览器做“预测”
| Prefetch | HTML/JS/CSS，放入缓存 | ||
| Prerender |
🚀 6 行代码，直接生效
把下面这段放进 <head>，立刻启用 moderate 级别的 prerender：
<scripttype="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 鼠标按下才干（最省资源）
🛡️ 避坑指南
prerenderingchange 事件后再上报 | |
🎖️ 一句话总结
把等待时间从「用户侧」转移到「浏览器空闲时间」，这就是 Speculation Rules API 的全部魔法。
下次产品说“再加个 loading 动画”时，直接把这篇文章甩给他 —— 然后优雅地附上那 6 行 HTML。
参考链接： https://medium.com/@fireprogrammer/make-any-app-load-faster-with-just-6-lines-of-html-fe091cb9fdf6