Speculation Rules API

Speculation Rules API 提供了一种标准化、声明式 的方法,让开发者能指导浏览器利用空闲时间或根据用户行为(如悬停),智能地预加载或预渲染下一个页面,从而将传统的"点击-等待-加载"体验升级为"点击-瞬间展现"的极致流畅体验。

为什么需要它?解决了什么问题?

在它出现之前,我们优化下一页加载的方式主要有:

  1. <link rel="preload">:预加载关键资源(如脚本、字体),但仅限于当前页面。

  2. <link rel="prefetch">:低优先级地获取未来可能需要的资源(如下一个页面的 JS 文件),但不执行或渲染它们。

  3. 用 JavaScript 和 Mouseover/Mousedown 事件来模拟预加载,但这很复杂且容易出错。

这些方法不够强大,无法实现真正的预渲染------即在用户点击之前,在后台完全加载、解析甚至渲染整个页面。

Speculation Rules API 的目标就是填补这个空白,让原生、高效的预渲染成为可能。

工作原理与语法

你需要在 HTML 中通过一个 <script type="speculationrules"> 标签来定义规则。规则目前主要支持两种模式:

1. 预获取 (prefetch)

这类似于 rel="prefetch",但更强大。它会提前获取页面所需的资源(HTML、JS、CSS等),并将其放入 HTTP 缓存中。当用户真正导航时,大部分资源已经从磁盘加载,速度极快。

html 复制代码
<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "list",
      "urls": ["/product/123", "/about.html"],
      // 可选:需要时再触发预取的条件
      "requires": ["anonymous-client-ip-when-cross-origin"] 
    }
  ]
}
</script>
2. 预渲染 (prerender)

这是"大招"。它不仅仅下载资源,还会在后台完整地渲染整个页面 ,包括执行 JavaScript、发起 API 调用、渲染布局等。当用户点击链接时,浏览器几乎可以立即切换到一个已经准备好的、活生生的页面,实现"瞬时导航"。

html 复制代码
<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/next-article.html"]
    }
  ]
}
</script>

更常见和强大的用法是基于文档的规则,根据当前页面的链接动态推测:

html 复制代码
<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      // 预渲染与当前页面同源的用户可能点击的链接
      "where": { 
        "href_matches": "/products/*" // 可以是CSS选择器,如 "a[rel='prerender']"
      },
      // 只有在认为有足够理由时(如鼠标悬停)才启动预渲染
      "eagerness": "moderate" 
    }
  ]
}
</script>
关键配置:eagerness (急切程度)

这个参数控制浏览器何时执行推测操作,对于性能优化至关重要:

  • "immediate":立即执行。适用于你非常确定用户会访问的页面(如"下一步"按钮)。

  • "eager":在空闲时很快执行。

  • "moderate" (默认):在强烈的用户信号(如 mousedownhover 一段时间)后执行。这是平衡资源和收益的最佳选择。

  • "conservative" :只在非常强烈的信号(如点击开始但尚未释放的 mousedown 事件)后执行。

好处与优势

  1. 极致的用户体验:实现真正的"瞬时加载",感觉就像在使用一个单页面应用 (SPA),而无需其复杂性。

  2. 更高的 Core Web Vitals 分数 :大幅改善 LCP (最大内容绘制)INP (交互下次延迟) 指标。

  3. 开发者友好:只需几行 JSON 配置,无需复杂的 JavaScript 逻辑。

  4. 资源智能管理:浏览器会自动管理预渲染的页面,如果内存不足或用户从未访问,会优雅地丢弃它们,避免浪费资源。

  5. 更好的隐私保护:与第三方 cookie 无关,规则遵循同源策略和用户设置(如省流模式)。

注意事项与最佳实践

  1. 资源消耗 :预渲染,尤其是 prerender,会消耗额外的 CPU、网络和内存。必须谨慎使用 eagerness 并只用于高概率的导航。不要预渲染太多页面!

  2. 状态管理 :预渲染的页面可能会发起 API 调用。确保这些调用是幂等的,或者使用虚拟数据,以免在用户真正访问前就改变了服务器状态(例如,不小心创建了订单)。

  3. 浏览器支持 :这是一个渐进增强的功能。首先在 Chromium 内核的浏览器(Chrome, Edge, Opera等)中实现和支持。始终要检查支持情况。

  4. 测试工具

    • Chrome DevTools > Application > Speculation Rules 面板可以查看规则状态和预渲染的页面。

    • chrome://predictors 可以查看 Chrome 自身的预测逻辑。

  5. 用例

    • 高概率单步导航:如"下一步"、"继续购物"按钮。

    • 无限滚动列表中的下一页

    • 搜索引擎结果页 (SERP) 的第一个结果

    • 用户悬停停留超过 200ms 的链接。

总结

Speculation Rules API 是将 Web 性能推向新高度的关键技术。 它通过将传统的"点击-加载-等待"模式转变为"预测-准备-瞬时切换"模式,为多页面应用 (MPA) 提供了媲美单页面应用 (SPA) 的导航体验。

相关推荐
qwy71522925816312 小时前
vue自定义指令
前端·javascript·vue.js
niusir12 小时前
Zustand 实战:10 行代码搞定全局状态
前端·javascript·react.js
niusir12 小时前
React 状态管理的演进与最佳实践
前端·javascript·react.js
张愚歌12 小时前
快速上手Leaflet:轻松创建你的第一个交互地图
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(3)—— 借鉴 Cursor 的设计模式实现深度搜索
前端·人工智能·aigc
看到我请叫我铁锤12 小时前
vue3使用leaflet的时候高亮显示省市区
前端·javascript·vue.js
南囝coding12 小时前
Vercel 发布 AI Gateway 神器!可一键访问数百个模型,助力零门槛开发 AI 应用
前端·后端
AI大模型12 小时前
前端学 AI 不用愁!手把手教你用 LangGraph 实现 ReAct 智能体(附完整流程 + 代码)
前端·llm·agent
小红13 小时前
网络通信基石:从IP地址到子网划分的完整指南
前端·网络协议
一枚前端小能手13 小时前
🔥 前端储存这点事 - 5个存储方案让你的数据管理更优雅
前端·javascript