speculation rules api 是开发者主动声明确定性规则以控制浏览器预渲染或预加载的机制，非ai预测工具；适用于意图明确、内容稳定、同源非敏感的链接，通过json配置prefetch或prerender策略，并可与instant.page兼容降级。
Speculation Rules API 不是“预测用户行为”的 AI 工具，它不分析点击流、停留时长或历史路径。它的作用是：**由开发者主动声明一组确定性规则，告诉浏览器“在什么条件下，对哪些链接执行预渲染或预加载”**。所谓“预测”，其实是基于页面结构和用户常见操作模式的合理假设，比如“分页链接大概率会被点”“主导航菜单项是高频跳转目标”。
明确适用场景：哪些链接值得加 Speculation Rules？
不是所有链接都适合。重点考虑三类：
- 用户意图明确、跳转概率高的链接：如文章页底部的“下一页”、“上一篇”，分类列表页顶部的“全部分类”导航，搜索结果页的分页数字。
- 内容稳定、资源体积可控的页面：避免对含大量动态 JS、第三方广告或实时数据的后台页使用预渲染，否则可能白忙一场甚至引发副作用。
- 同源、非敏感、无需登录态校验的页面：跨域页面不支持；需登录才能访问的页面，预渲染后可能因鉴权失败而空白或报错。
用 JSON 声明规则：比写一堆 更清晰
把规则写成一段内联脚本，放在
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
{
"prefetch": [
{ "source": "list", "urls": ["https://yoursite.com/blog/", "https://yoursite.com/about/"] }
],
"prerender": [
{ "source": "document", "selector": "a.next-page, a.prev-page" }
]
}
说明：
-
"prefetch"：仅下载 HTML 和关键资源（JS/CSS），不解析执行，适合较重页面或带权限判断的页面。 -
"prerender"：在隐藏 iframe 中完整加载、解析、执行并渲染整个页面，点击瞬间即切换，体验最接近 SPA。 -
"source": "document" + selector：直接从当前 DOM 中抓取匹配链接，免去硬编码 URL，维护成本低。
与 instant.page 配合使用，兼顾兼容性与体验
并非所有浏览器都支持 Speculation Rules（目前 Chrome 120+、Edge 120+、Opera 稳定支持；Firefox 尚未启用）。这时可以搭配轻量脚本 instant.page：
- 它会自动检测浏览器是否支持 Speculation Rules；支持则调用原生 API，不支持则退回到
<link rel="prefetch">或 fetch 预加载。 - 默认 65ms 悬停延迟，避免误触发；只对鼠标悬停和触摸开始事件响应，不干扰键盘导航或屏幕阅读器。
- 只需在 引入一行：
<script src="https://cdn.jsdelivr.net/npm/instant.page@5.1.1" type="module" defer integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jFVmsSibVXNo02Zb9WF70v..."></script>
别忽略基础前提：预加载效果取决于页面本身是否可优化
Speculation Rules 再强大，也无法加速一个本身就很慢的页面。确保以下几点已就绪：
- 目标页面首屏 HTML 小于 100KB，关键 CSS 内联，JS 延迟加载或模块化拆分。
- 服务器开启 HTTP/2 或 HTTP/3，支持 Early Hints（
103 Early Hints），让浏览器更早获取资源线索。 - 静态资源（图片、字体、CSS/JS）配置了合理的 Cache-Control 头，避免重复下载。
- 禁用不必要的 WordPress 插件钩子、冗余 REST API 调用，减少 PHP 渲染耗时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
