speculation rules 是 chromium 浏览器原生支持的 json 规则驱动预获取机制，区别于传统 prefetch：它支持条件触发（hover/click）、批量 url、动态路径及细粒度时机控制，而非单资源、静态、低优先级加载。
Speculation Rules 是什么，和传统 prefetch 有什么根本区别
Speculation Rules 不是 prefetch 的升级版，它是浏览器原生支持的、基于 JSON 规则驱动的预获取机制，目前仅 Chromium（Chrome/Edge ≥120）稳定支持。它不依赖 <link rel="prefetch"> 标签，而是通过内联 <script type="speculationrules"></script> 声明规则，由浏览器在解析 HTML 时同步加载并应用。关键差异在于：传统 prefetch 是单资源、静态、低优先级、onload 后才触发；而 Speculation Rules 支持条件判断（如 hover、click）、批量 URL、动态生成（配合 document.baseURI）、以及更细粒度的触发时机控制（如 "source": "hover"）。
怎么写一个合法的 Speculation Rules prefetch 规则块
必须满足三个硬性条件才能被识别：放在 中、type 为 "speculationrules"、内容是合法 JSON。常见错误是漏掉 sources 数组或写错 urls 结构。
-
sources必须是数组，每个元素含source（"hover"或"click"）和urls（字符串数组） -
urls中的路径必须是绝对路径或根相对路径（如"/js/detail-page.js"），不能用./或../ - 不支持跨域资源，除非目标服务端明确返回
Access-Control-Allow-Origin: *且请求带crossorigin属性（但 Speculation Rules 本身不提供 crossorigin 配置项，实际跨域 prefetch 多数静默失败） - 示例正确写法：
<script type="speculationrules">
{
"prefetch": [{
"source": "hover",
"urls": ["/js/profile.chunk.js", "/css/profile.css"]
}, {
"source": "click",
"urls": ["/pages/checkout.html"]
}]
}
</script>
为什么写了 rules 却没看到 prefetch 请求发出
最常见原因是触发条件未满足：Chrome 默认只对用户真实交互（如鼠标悬停超过 65ms、或点击可导航链接）才启动预取；纯静态规则（无 hover/click 元素）不会触发。另外，以下情况会导致静默失效：
- 当前页面尚未完成
DOMContentLoaded，规则还未被解析 - 目标 URL 返回非 2xx 状态码（如 404、500），浏览器不报错但跳过缓存
- 资源响应头缺少强缓存指令（如
Cache-Control: public, max-age=31536000），下次导航时无法复用 - DevTools Network 面板需手动勾选
prefetch过滤器，否则默认隐藏 - Safari 和 Firefox 完全不支持 Speculation Rules，写了也无效
Speculation Rules 和传统 <link rel="prefetch"> 能否共存
可以共存，但要注意资源冲突。如果同一 URL 同时出现在 <link rel="prefetch"> 和 Speculation Rules 中，Chrome 会按高优先级策略去重，通常以 rules 中的为准。但更关键的是：不要让两者指向不同版本的同一资源（比如 rules 指向 /js/app-v2.js，而 <link> 指向 /js/app-v1.js），这会导致缓存键不一致，后续导航时无法命中。
容易被忽略的一点：Speculation Rules 不支持 as 属性，浏览器完全依赖文件后缀和响应头推断类型；若服务端返回 Content-Type: text/plain 却期望当脚本用，缓存复用会失败——这点比传统 prefetch 更难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
