speculation rules api是chrome/edge 96+支持的声明式预加载机制，通过配置json规则，实现prefetch（资源预取）或prerender（整页预渲染），需遵守同源、无副作用等限制。
直接在 HTML 中用 <script type="speculationrules"></script> 声明 JSON 规则，就能让 Chromium 浏览器（Chrome/Edge 96+）自动预取或预渲染目标页面。关键不在“写得多”，而在“判得准”——规则要贴合用户真实跳转路径，同时避开副作用和跨域限制。
明确指定 URL 列表：适合已知高转化路径
当你要预加载几个确定会被点击的页面（比如产品详情页、下一页分页链接），用 "source": "list" 最稳妥。
- 预取资源（不执行 JS）：只下载 HTML、CSS、JS 到内存缓存，节省网络耗时，适合轻量级跳转
- 预渲染整页（执行 JS、构建 DOM）：用户点即显示，但需确保目标页无副作用（如 POST 提交、支付弹窗）
- 可加
"requires"字段控制触发条件，例如"anonymous-client-ip-when-cross-origin"表示仅在同源或满足匿名 IP 条件时才启动
示例（预渲染两个已知页面）：
<script type="speculationrules"><br>{<br> "prerender": [<br> {<br> "source": "list",<br> "urls": ["/product/2024", "/checkout?step=2"]<br> }<br> ]<br>}</script>基于当前文档自动推断：适合动态链接结构
电商列表页、博客归档页这类页面，链接多且规律性强，用 "source": "document" 更灵活。
- 配合
"href_matches"正则匹配（如"/products/\d+"）或 CSS 选择器（如"a[data-prerender]"），精准圈定可预渲染的链接 -
"eagerness"控制时机："conservative"等用户悬停再触发；"moderate"悬停后稍延迟加载；"eager"页面空闲即开始（慎用，耗资源） - 浏览器会自动忽略跨域链接、带 query 参数的登录页、含 form 的敏感页
示例（只预渲染带 data-prerender 属性的同源链接）：
<script type="speculationrules"><br>{<br> "prerender": [<br> {<br> "source": "document",<br> "where": { "selector_matches": "a[data-prerender]" },<br> "eagerness": "moderate"<br> }<br> ]<br>}</script>混合使用 prefetch 和 prerender：按资源价值分级处理
不是所有页面都值得完整预渲染。通常做法是：核心跳转页用 prerender，辅助资源（字体、公共 JS 库）用 prefetch。
- prefetch 的资源存在内存中，比 HTTP 缓存更快取用；prerender 的页面会维持一个隐藏的渲染进程
- 可对同一组 URL 同时定义 prefetch 和 prerender，浏览器会按需降级（如内存不足时自动转为 prefetch）
- 避免在 prerender 规则里写跨域地址，浏览器会直接跳过；prefetch 跨域需确保 CORS 配置正确
示例（首页同时预取字体 + 预渲染热门文章）：
<script type="speculationrules"><br>{<br> "prefetch": [<br> { "urls": ["https://fonts.googleapis.com/css2?family=Inter"] }<br> ],<br> "prerender": [<br> { "source": "document", "where": { "href_matches": "/article/\d+" } }<br> ]<br>}</script>必须检查的三项安全与兼容性红线
规则生效的前提是绕过浏览器的硬性限制，否则会静默失效。
-
同源强制要求：prerender 不支持跨域，prefetch 跨域需服务端返回
Access-Control-Allow-Origin -
副作用拦截：目标页若执行
fetch(..., {method: 'POST'})或调用navigator.sendBeacon，浏览器将终止预渲染并报 warning -
浏览器支持现状：Chrome/Edge 96+ 支持完整功能；Firefox、Safari 当前无计划支持，需用
@supports (speculation-rules: true)特性检测做降级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
