Speculation Rules（预取规则） - 声明式预加载未来页面的浏览器API

引言

在当今数字化时代，网页加载速度对于用户体验至关重要。用户期望在点击链接后能够瞬间跳转到目标页面，而无需长时间等待页面加载。为了满足这一需求，浏览器开发者不断探索新的技术来优化网页加载性能。Speculation Rules（预取规则）作为一种声明式预加载未来页面的浏览器API，应运而生，为提升多页面应用（MPA）的性能提供了强大支持。

Speculation Rules概述

定义与核心概念

Speculation Rules是一个由Google开发的基于JSON定义的浏览器API。其核心目标是通过预测用户可能的下一步导航，提前加载或渲染页面，从而显著提升MPA的性能。简单来说，它就像是一位聪明的“导航助手”，在用户还未明确点击某个链接时，就已经开始为即将访问的页面做准备，让用户感觉导航几乎是瞬时的。

工作原理

Speculation Rules的工作原理基于对用户行为的预测。它通过分析用户的浏览历史、当前页面的内容以及常见的导航模式等因素，推测用户接下来可能会访问的页面。一旦确定了目标页面，浏览器就会根据预取规则，选择合适的方式进行预加载或预渲染。

适用场景

Speculation Rules适用于多种用户可能访问的页面场景。例如，在文章列表页面中，“下一页”是用户经常会点击的链接，通过Speculation Rules可以提前预取“下一页”的内容。对于电商网站，“结账”页面是用户极大概率会访问的页面，尤其是在用户将商品添加到购物车后，浏览器可以预渲染“结账”页面，包括所有子资源和JavaScript的执行，这样当用户点击“结账”按钮时，页面能够瞬间呈现，大大提高了用户体验。

Speculation Rules的使用方法

基本配置示例

以下是一个简单的Speculation Rules配置示例，展示了如何同时使用prefetch和prerender：

html
<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["/next.html", "/next2.html"],
      "requires": ["anonymous-client-ip-when-cross-origin"],
      "referrer_policy": "no-referrer"
    }
  ],
  "prerender": [
    {
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": {"href_matches": "/logout"}},
          {"not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          {"not": {"selector_matches": ".no-prerender"}},
          {"not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }
  ]
}
</script>

在这个示例中，prefetch指定了预取/next.html和/next2.html页面，并设置了隐私和引用策略。prerender则对符合条件的链接进行预渲染，排除了特定页面（如退出登录或购物车相关页面）。

配置项说明

• prefetch：用于指定需要预取的页面URL列表。可以通过urls字段明确列出要预取的页面地址，还可以使用requires字段设置一些条件，例如在跨域请求时是否需要匿名客户端IP。referrer_policy字段用于设置引用策略，控制预取请求的引用来源。
• prerender：与prefetch类似，但prerender不仅会下载页面的HTML资源，还会完全渲染页面，包括所有子资源和JavaScript的执行。where字段用于定义预渲染的条件，可以使用各种选择器来匹配符合条件的链接。

动态添加规则

除了在HTML中直接嵌入<script type="speculationrules">标签外，还可以根据浏览器支持情况动态添加规则，实现优雅降级。以下是一个动态添加规则的示例代码：

javascript
if (HTMLScriptElement.supports && HTMLScriptElement.supports("speculationrules")) {
  const specScript = document.createElement("script");
  specScript.type = "speculationrules";
  specScript.textContent = JSON.stringify({
    "prefetch": [
      {"source": "list", "urls": ["/next.html"]}
    ]
  });
  document.body.appendChild(specScript);
} else {
  const link = document.createElement("link");
  link.rel = "prefetch";
  link.href = "/next.html";
  document.head.appendChild(link);
}

如果浏览器支持Speculation Rules API，就动态创建一个<script>标签并添加规则；如果不支持，则使用传统的<link rel="prefetch">方式进行预取。

分层规则

通过分层规则，可以更灵活地控制预取和预渲染行为。以下是一个分层示例：

html
<script type="speculationrules">
{
  "prefetch": [
    {
      "where": {"selector_matches": "[data-prefetch='']"},
      "eagerness": "eager"
    },
    {
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": {"selector_matches": "[data-prefetch=false]"}}
        ]
      },
      "eagerness": "moderate"
    }
  ],
  "prerender": [
    {
      "where": {"selector_matches": "[data-prefetch=prerender]"},
      "eagerness": "eager"
    },
    {
      "where": {"selector_matches": "[data-prefetch='']"},
      "eagerness": "moderate"
    }
  ]
}
</script>

在这个示例中，根据data-prefetch属性的值设置了不同的预取和预渲染优先级（eagerness），如eager表示积极预取，moderate表示适度预取。

页面使用

在HTML中可以通过data-prefetch属性控制链接行为。例如：

html
<a href data-prefetch>Prefetched Link</a> <!-- 立即预取，悬停时预渲染 -->
<a href data-prefetch="prerender">Prerendered Link</a> <!-- 立即预渲染 -->
<a href data-prefetch="false">Untouched Link</a> <!-- 禁用预取/预渲染 -->

此外，还可以通过JavaScript动态调整data-prefetch值，实现按需升级：

javascript
document.querySelector("a").dataset.prefetch = "prerender";

Speculation Rules的优势

提升页面切换速度

Speculation Rules通过提前加载或渲染页面，显著减少了页面切换时的等待时间。用户点击链接后，页面能够瞬间呈现，仿佛已经提前加载好了一样，大大提升了用户体验。

降低服务器负载

由于浏览器提前预取了页面资源，当用户实际访问这些页面时，服务器需要处理的请求数量减少，从而降低了服务器的负载。这对于高流量的网站来说，可以有效提高服务器的稳定性和响应速度。

优化资源利用

Speculation Rules可以根据用户的浏览行为，智能地选择需要预取的页面，避免了不必要的资源浪费。同时，它还可以与浏览器的缓存机制相结合，提高资源的利用率。

案例分析

博客网站案例

假设有一个博客网站，文章列表页面展示了多篇文章的标题和摘要，用户通常会通过点击“下一页”按钮来浏览更多文章。在没有使用Speculation Rules之前，当用户点击“下一页”时，浏览器需要向服务器发送请求，等待服务器响应并传输页面数据，这个过程可能会导致页面加载延迟，影响用户体验。

使用Speculation Rules后，可以在文章列表页面中添加预取规则，提前预取“下一页”的内容。当用户滚动到页面底部并准备点击“下一页”时，浏览器已经将“下一页”的页面数据加载到了本地缓存中，用户点击后页面能够瞬间切换，大大提高了页面加载速度。

电商网站案例

在电商网站中，用户在浏览商品并添加到购物车后，通常会进行结账操作。结账页面包含了用户的订单信息、收货地址、支付方式等重要内容，加载速度对于用户体验至关重要。

通过Speculation Rules，可以在用户将商品添加到购物车后，预渲染结账页面。当用户点击“结账”按钮时，浏览器可以直接从本地缓存中获取已经渲染好的结账页面，无需再次向服务器请求页面数据和执行渲染操作，从而实现页面的瞬间呈现，提高用户的结账效率。

面临的挑战与解决方案

预取准确性

预取的数据如果并不是用户实际需要的数据，就会造成资源浪费，甚至可能导致高速缓存污染，降低系统性能。为了提高预取的准确性，可以采用智能预取算法，例如利用机器学习技术，根据程序的历史行为预测未来的数据访问模式，从而进行更加精确的预取。

预取开销

预取操作本身需要消耗处理器的资源，如预取指令的执行、预取数据的传输等。如果预取开销过大，可能会抵消预取带来的性能提升。为了降低预取开销，可以采用动态预取策略，根据程序的实时运行状态，动态调整预取策略。例如，在程序运行过程中，根据数据访问的实际情况，动态调整预取的深度和广度。

缓存一致性问题

在多处理器系统中，预取数据可能会导致缓存一致性问题。预取的数据需要在多个处理器的缓存中保持一致，否则可能会导致程序运行错误。为了解决缓存一致性问题，可以采用硬件与软件协同预取技术，进一步加强硬件和软件的协同预取能力。例如，硬件可以提供更加灵活的预取接口，软件可以根据硬件的预取能力，更加精确地控制预取操作。

结论

Speculation Rules作为一种声明式预加载未来页面的浏览器API，为提升MPA的性能提供了强大的支持。通过合理配置prefetch和prerender，结合规则分层和动态调整，可以为用户带来更快的页面切换体验。虽然Speculation Rules面临着预取准确性、预取开销以及缓存一致性问题等挑战，但通过研究智能预取算法、动态预取策略以及硬件与软件协同预取技术，可以进一步提高预取的准确性和效率。随着Web技术的不断发展，Speculation Rules有望在更多的网站和应用中得到广泛应用，为用户提供更加流畅、高效的网页浏览体验。

扫描下方二维码，一个老毕登免费为你解答更多软件开发疑问！