预提取、预渲染和 Service Worker 预缓存

在最后几个单元中,您了解了延迟 JavaScript 加载以及延迟加载图片和 <iframe> 元素。 推迟资源加载会降低初始阶段的网络和 CPU 使用率 通过在需要时下载资源来加载网页 而不是预先加载它们,以免它们被闲置 这样可以缩短初始网页加载时间,但后续互动可能会引发 如果当时尚未加载为它们提供支持的资源,则会发生延迟 错误发生。

例如,如果某个网页包含自定义日期选择器,您可以将该日期 选择器的资源,直到用户与元素互动为止。然而,正在加载 日期选择器的资源按需使用可能会导致延迟,虽然 也可能不会,具体取决于用户的网络连接、设备功能或 直到资源被下载、解析并且可以执行。

这有点棘手 — 您不希望因加载网页而浪费带宽 可以不使用的资源,但会延迟互动和后续页面浏览 也并不理想幸运的是,你可以利用许多工具 如何在这两种极端之间取得更好的平衡,本单元将介绍 您可以使用一些方法来实现这一目标,例如预提取资源、 预渲染整个页面,以及使用 Service Worker 预缓存资源。

以低优先级预提取近期所需的资源

您可以提前获取资源,包括图片、样式表 或 JavaScript 资源)使用 <link rel="prefetch"> 资源提示。通过 prefetch 提示会告知浏览器在 。

如果指定了 prefetch 提示,浏览器便可向 以最低优先级为资源争用资源,以免争用资源 当前页面所需的资源

<ph type="x-smartling-placeholder">

预提取资源可以改善用户体验,因为用户 因为在不久的将来,需要等待下载完成所需的资源后, 可以在需要时从磁盘缓存中立即检索到。

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

上述 HTML 代码段告知浏览器可以预提取 在设备处于空闲状态后,立即执行 date-picker.jsdate-picker.css 操作。您同样可以 在用户与网页的交互时动态预提取资源, JavaScript。

除 Safari 之外,其他所有现代浏览器都支持 prefetch, 。如果您非常需要 确保网站资源适合所有浏览器,并且您正在使用 Service Worker,然后阅读本单元后面的预缓存 使用 Service Worker 管理资源

预提取网页以加快以后浏览速度

您还可以通过指定 as="document" 属性:

<link rel="prefetch" href="/page" as="document">

当浏览器处于空闲状态时,它可以针对 /page 发起低优先级的请求。

<ph type="x-smartling-placeholder">

在基于 Chromium 的浏览器中,您可以使用 Speculation Rules API。推测规则定义为 JSON 对象 添加到网页的 HTML 中,或通过 JavaScript 动态添加:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

JSON 对象描述一项或多项操作 - 目前仅支持 prefetchprerender,以及与该操作相关联的网址列表。在 上述 HTML 代码段,系统会指示浏览器预提取 /page-a/page-b。与 <link rel="prefetch"> 类似,推测规则 提示浏览器在某些情况下可能会忽略。

<ph type="x-smartling-placeholder">

Quicklink 等库可以动态地改进网页导航 预提取或预呈现指向相应网页的链接, 完全透明这可以提高用户最终 会转到该网页(与预提取网页上所有链接相比)。

<ph type="x-smartling-placeholder">

预渲染网页

除了预提取资源之外,系统还可以提示浏览器 在用户进入网页之前预渲染网页。这在一定程度上可以 网页及其资源是在 Google Cloud 中 背景。当用户进入网页后,该网页就会被放置到 前景。

通过 Speculation Rules API 支持预渲染:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>
。 <ph type="x-smartling-placeholder">

预提取和预渲染演示

Service Worker 预缓存

您还可以使用 Service Worker 推测性地预提取资源。 Service Worker 预缓存可以使用 Cache API 提取和保存资源, 允许浏览器使用 Cache API 处理请求,而无需 网络。Service Worker 预缓存使用非常有效的 Service Worker 缓存策略,称为仅缓存策略。这种模式 其有效性,因为一旦资源被放入 Service Worker 缓存,它们 在请求后几乎会立即被提取。

<ph type="x-smartling-placeholder">
</ph> 显示从页面到 Service Worker 再到缓存的 Service Worker 缓存流。 <ph type="x-smartling-placeholder">
</ph> 仅缓存策略只会从 网络。安装后,缓存的 只从 Service Worker 缓存中检索资源。
<ph type="x-smartling-placeholder">

要使用 Service Worker 预缓存资源,您可以使用 Workbox。如果您 但您可以编写自己的代码来缓存 文件。无论采用哪种方式,您都决定使用 Service Worker 来预缓存 但需要知道,当服务启动时, 工作器数量。安装完成后,系统会立即将预缓存的资源 以供 Service Worker 在您网站上控制的任何页面上进行检索。

<ph type="x-smartling-placeholder">

Workbox 使用预缓存清单来确定应将哪些资源 已预缓存预缓存清单是文件和版本控制信息的列表 用作“可信来源”要预缓存的资源

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

上述代码是包含两个文件的示例清单: script.ffaa4455.js/index.html。如果资源包含版本 文件本身包含的信息(称为文件哈希值),则 revision 属性可以保留为 null,因为文件已进行版本控制(例如, ffaa4455,适用于上述代码中的 script.ffaa4455.js 资源)。对于 无版本控制的资源,可以在构建时为其生成修订版本。

设置完成后,可使用 Service Worker 预缓存静态页面或其 子资源来加快后续网页导航的速度。

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

例如,在电子商务商品详情页面上,可以使用 Service Worker 预缓存呈现商品详情页所需的 CSS 和 JavaScript, 让用户更快地导航到商品详情页面在 在前面的示例中,product-page.ac29.cssproduct-page.39a1.js 是 已预缓存workbox-precaching 中提供的 precacheAndRoute 方法 自动注册所需的处理程序,以确保预缓存的资源 会在必要时从 Service Worker API 中提取。

由于Service Worker 受到广泛支持,因此您可以使用 Service Worker 必要时在任何现代浏览器上预缓存。

<ph type="x-smartling-placeholder">。 <ph type="x-smartling-placeholder">

知识测验

prefetch 提示的执行优先级是多少?

无压力
高。
中等。

预提取和预提取有什么区别?呈现网页?

虽然网页的预提取和预渲染都会获得一个网页和 预提取只会检索相应网页及其所有子资源, 而预渲染则更进一步 整个页面在后台运行,直到用户进入该页面。
它们大体相同,只是预渲染会获得 而预提取则不支持

Service Worker 缓存和 HTTP 缓存是相同的。

错误
正确

下一篇:Web Worker 概览

现在,您已经了解预提取、预渲染和 Service Worker 预缓存如何 可以加快向未来导航的速度 您可以就如何实现这一目标做出明智的决策 对您的网站及其用户有益。

接下来,我们将简要介绍 Web Worker,并说明它们如何花费大量 在主线程以外工作,为主线程提供更多空间 用户互动如果您曾想过怎样做 那么接下来的两个单元值得您花时间学习!