在最后几个单元中，您了解了延迟
JavaScript 加载以及延迟加载图片和 <iframe> 元素。
推迟资源加载会降低初始阶段的网络和 CPU 使用率
通过在需要时下载资源来加载网页
而不是预先加载它们，以免它们被闲置
这样可以缩短初始网页加载时间，但后续互动可能会引发
如果当时尚未加载为它们提供支持的资源，则会发生延迟
错误发生。
例如，如果某个网页包含自定义日期选择器，您可以将该日期 选择器的资源，直到用户与元素互动为止。然而，正在加载 日期选择器的资源按需使用可能会导致延迟，虽然 也可能不会，具体取决于用户的网络连接、设备功能或 直到资源被下载、解析并且可以执行。
这有点棘手 — 您不希望因加载网页而浪费带宽 可以不使用的资源，但会延迟互动和后续页面浏览 也并不理想幸运的是，你可以利用许多工具 如何在这两种极端之间取得更好的平衡，本单元将介绍 您可以使用一些方法来实现这一目标，例如预提取资源、 预渲染整个页面，以及使用 Service Worker 预缓存资源。
以低优先级预提取近期所需的资源
您可以提前获取资源，包括图片、样式表
或 JavaScript 资源）使用 <link rel="prefetch"> 资源提示。通过
prefetch 提示会告知浏览器在
。
如果指定了 prefetch 提示，浏览器便可向
以最低优先级为资源争用资源，以免争用资源
当前页面所需的资源
预提取资源可以改善用户体验，因为用户 因为在不久的将来，需要等待下载完成所需的资源后， 可以在需要时从磁盘缓存中立即检索到。
<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 发起低优先级的请求。
在基于 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"> 类似，推测规则
提示浏览器在某些情况下可能会忽略。
Quicklink 等库可以动态地改进网页导航 预提取或预呈现指向相应网页的链接， 完全透明这可以提高用户最终 会转到该网页（与预提取网页上所有链接相比）。
<ph type="x-smartling-placeholder">预渲染网页
除了预提取资源之外，系统还可以提示浏览器 在用户进入网页之前预渲染网页。这在一定程度上可以 网页及其资源是在 Google Cloud 中 背景。当用户进入网页后，该网页就会被放置到 前景。
通过 Speculation Rules API 支持预渲染：
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/page-a", "page-b"]
}
]
}
</script>
预提取和预渲染演示
Service Worker 预缓存
您还可以使用 Service Worker 推测性地预提取资源。
Service Worker 预缓存可以使用 Cache API 提取和保存资源，
允许浏览器使用 Cache API 处理请求，而无需
网络。Service Worker 预缓存使用非常有效的 Service Worker
缓存策略，称为仅缓存策略。这种模式
其有效性，因为一旦资源被放入 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.css 和 product-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，并说明它们如何花费大量 在主线程以外工作，为主线程提供更多空间 用户互动如果您曾想过怎样做 那么接下来的两个单元值得您花时间学习！