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

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

明科·格切夫

在 2019 年 Google I/O 大会的利用预测性预提取实现更快的网页导航会议中，我首先介绍了利用代码拆分来优化 Web 应用，以及后续网页导航的潜在性能影响。在演讲的第二部分，我讨论了如何使用 Guess.js 设置预测性预提取，从而提高导航速度：

用于实现速度更快的 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，请参阅以下资源：