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

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

在 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 与 AngularNext.jsNuxt.jsGatsby 进行了集成。要在应用中使用它,请将以下代码行添加到您的 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,请查看以下资源: