speculation rules api 是 w3c 标准、chrome 主推并被 wordpress 6.8 深度集成的声明式预加载机制，通过 json 规则统一管理 dns 预解析、资源 prefetch/prerender/preload，静默准备资源以实现“用户未点、资源已就位”。
Speculation Rules API 是 W3C 标准化、Chrome 主推、并已被 WordPress 6.8 深度集成的现代预加载机制，它用声明式 JSON 规则替代零散的 <link rel="..."> 标签，能统一管理 DNS 预解析、资源预加载、页面推测导航等行为。它不执行 JS、不触发渲染，只在后台静默准备资源，真正实现“用户还没点，资源已就位”。
一、基础结构：一段 JSON 控制全站预加载策略
规则必须放在 中，使用 <script type="speculationrules"></script> 标签包裹，浏览器会自动识别并执行：
- 规则是纯声明式，无需写 JS 逻辑，也无需监听用户行为
- 支持条件匹配（如 URL 路径、元素选择器、hover/press 等交互信号）
- 可同时配置
prefetch（资源预取）、prerender（轻量预渲染）、preload（关键资源预加载）三类动作
二、精准预加载异步模块（如动态 import 的 chunk）
当路由懒加载或按需加载模块（如 import('./dashboard.js')）时，可通过 prefetch 提前拉取对应 JS chunk，避免点击后白屏等待：
- 在规则中指定目标模块的完整路径（与打包后实际 URL 一致，含哈希）
- 推荐配合
source: "list"+ 显式 URL 列表，确保可控性 - 避免盲目预加载全部 chunk，应结合用户行为预测（例如 hover 导航菜单项时预取其目标模块）
{
"prefetch": [{
"source": "list",
"urls": ["/static/js/dashboard.abc123.js"],
"requires": ["anonymous"]
}]
}
三、按需预加载 DOM 关键资源（图片、字体、CSS）
传统 <link rel="preload"> 只能写死在 HTML 里，而 Speculation Rules 支持基于上下文动态触发：
- 对首屏外但即将进入视口的
<img>或<link rel="stylesheet">，可用source: "document"+ CSS 选择器定位 - 对第三方字体（如 Google Fonts），建议用
prefetch+crossorigin: "anonymous"，确保跨域资源能被缓存复用 - 若资源依赖用户交互动机（如点击“展开详情”后才需要某张大图），可绑定
target_hint: "click"提升命中率
四、避坑要点：避免无效预加载与资源浪费
Speculation Rules 强大但不万能，错误配置反而拖慢首屏：
- 不要为所有
<a></a>标签无差别启用prerender，它消耗内存且仅 Chrome 支持；优先用prefetch+ 后续import()组合 - 避免预加载未压缩、未适配设备的资源（如 4K 图片在手机端）；规则中 URL 必须与最终网络请求完全一致
- 服务端需正确返回
Cache-Control和Content-Length，否则浏览器可能重复请求或丢弃预加载内容 - 开发阶段用 Chrome DevTools 的 Network → Initiator 列查看哪些请求由 speculation rules 触发，验证是否命中预期资源
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
