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) 的导航体验。

相关推荐
MediaTea2 小时前
Python 第三方库:lxml(高性能 XML/HTML 解析与处理)
xml·开发语言·前端·python·html
西陵2 小时前
Nx带来极致的前端开发体验——使用MF进行增量构建
前端·javascript·架构
Nicholas682 小时前
flutter滚动视图之ProxyWidget、ProxyElement、NotifiableElementMixin源码解析(九)
前端
JackieDYH3 小时前
vue3中reactive和ref如何使用和区别
前端·javascript·vue.js
伍哥的传说3 小时前
解密 Vue 3 shallowRef:浅层响应式 vs 深度响应式的性能对决
javascript·vue.js·ecmascript·vue3.js·大数据处理·响应式系统·shallowref
ZZHow10243 小时前
React前端开发_Day4
前端·笔记·react.js·前端框架·web
前端开发爱好者4 小时前
弃用 html2canvas!快 93 倍的截图神器
前端·javascript·vue.js
ss2734 小时前
手写MyBatis第39弹:深入MyBatis BatchExecutor实现原理与最佳实践
前端·javascript·html
leon_teacher4 小时前
HarmonyOS权限管理应用
android·服务器·前端·javascript·华为·harmonyos
lumi.5 小时前
HarmonyOS image组件深度解析:多场景应用与性能优化指南(2.4详细解析,完整见uniapp官网)
前端·javascript·小程序·uni-app·html·css3