通过预测性预提取提高网页导航速度

了解预测性预提取以及 Guess.js 如何实现它。

Minko Gechev

在 2019 年 Google I/O 大会上我的使用预测性预提取加快网页导航专题演讲中，我首先探讨了如何通过代码拆分来优化 Web 应用，以及后续网页导航可能对性能产生的影响。在演讲的第二部分中，我讨论了如何使用 Guess.js 设置预测性预提取来提高导航速度：

用于加快 Web 应用的代码拆分

Web 应用的运行速度比较缓慢，而 JavaScript 是交付的最昂贵的资源之一。等待 Web 应用加载缓慢可能会令用户感到沮丧并降低转化率。

运行缓慢的 Web 应用会让人倍感压力。

延迟加载是一种有效的技术，可减少通过网络传输的 JavaScript 字节数。您可以使用多种技术来延迟加载 JavaScript，包括：

  • 组件级代码拆分
  • 路由级代码拆分

通过组件级代码拆分，您可以将各个组件移至单独的 JavaScript 块中。针对特定事件，您可以加载相关脚本并渲染组件。

不过，通过路由级别的代码拆分，您可以将整个路由移至独立的区块。当用户从一个路由转到另一个路由时，他们必须下载关联的 JavaScript 并引导所请求的网页。这些操作可能会导致严重延迟，尤其是在网速较慢的情况下。

预提取 JavaScript

预提取可让浏览器下载并缓存用户可能很快需要的资源。通常的方法是使用 <link rel="prefetch">，但有两个常见的误区：

  • 预提取过多资源（过度提取）会消耗大量数据。
  • 用户所需的某些资源可能永远不会被预提取。

预测性预提取通过使用用户导航模式报告来确定要预提取的资源，从而解决了这些问题。

预提取示例

使用 Guess.js 进行预测性预提取

Guess.js 是一个提供预测性预提取功能的 JavaScript 库。Guess.js 使用来自 Google Analytics（分析）或其他分析服务提供商的报告来构建预测模型，用于仅智能地预提取用户可能需要的内容。

Guess.js 与 Angular、Next.js、Nuxt.js 和 Gatsby 进行了集成。要在应用中使用它，请将以下代码行添加到您的 webpack 配置中，以指定 Google Analytics（分析）数据视图 ID：

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

如果您没有使用 Google Analytics（分析），则可以指定 reportProvider，并从您喜爱的服务下载数据。

与框架集成

要详细了解如何将 Guess.js 与您最喜爱的框架集成，请查看以下资源：

如需快速了解与 Angular 的集成，请观看此视频：

Guess.js 的工作原理

下面展示了 Guess.js 如何实现预测性预提取：

  1. 首先，它会从您喜爱的分析提供程序提取用户导航模式数据。
  2. 然后，它会将报告中的网址映射到 webpack 生成的 JavaScript 块。
  3. 它会基于提取的数据创建一个简单的预测模型，用于预测用户可能会从任何给定页面导航到哪些页面。
  4. 它会针对每个 JavaScript 分块调用模型，预测接下来可能需要的其他分块。
  5. 它会向每个分块添加预提取指令。

完成 Guess.js 后，每个块将包含预取指令，类似于以下内容：

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

这段由 Guess.js 生成的代码会指示浏览器考虑预提取概率为 0.2 的分块 a.js 和概率为 0.8 的分块 b.js。

浏览器执行代码后，Guess.js 将检查用户的连接速度。如果足够，Guess.js 将在页面标头中插入两个 <link rel="prefetch"> 标记，每个标记对应一个分块。如果用户使用的是高速网络，Guess.js 将预取两个数据块。如果用户的网络连接状况不佳，Guess.js 将仅预取区块 b.js，因为很有可能会需要它。

了解详情

如需详细了解 Guess.js，请查看以下资源：