在最后几个单元中,您了解了延迟
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 缓存,它们
在请求后几乎会立即被提取。
![显示从页面到 Service Worker 再到缓存的 Service Worker 缓存流。](https://web.developers.google.cn/static/learn/performance/prefetching-prerendering-precaching/image/fig-1.png?authuser=9&hl=sk)
要使用 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,并说明它们如何花费大量 在主线程以外工作,为主线程提供更多空间 用户互动如果您曾想过怎样做 那么接下来的两个单元值得您花时间学习!