预提取、预渲染和 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.js 和 date-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 对象描述一项或多项操作 - 目前仅支持 prefetch 和 prerender，以及与该操作相关联的网址列表。在 上述 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>