感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

通过资源提示协助浏览器

在关于优化资源加载的最后一个单元中，您了解了 CSS 和 JavaScript 等网页资源会影响网页加载速度，您可以优化它们及其投放，以加快网页的呈现速度。现在正是学习更高级的资源技术的大好时机这涉及使用资源提示。

资源提示可以帮助开发者进一步优化网页加载时间，浏览器如何加载资源并确定其优先级。一组初始资源最先引入的提示是 preconnect 和 dns-prefetch 等。不过，随着时间的推移，preload 和 Fetch Priority API 也会随之增加提供额外的功能

资源提示指示浏览器提前执行某些操作来提升加载性能资源提示可以执行例如执行早期 DNS 查找、提前连接到服务器，甚至在浏览器通常发现资源之前获取资源。

资源提示可以使用 HTML 指定，通常在 <head> 的早期指定元素或设置为 HTTP 标头。在本单元的讨论范围内涵盖 preconnect、dns-prefetch 和 preload，以及 prefetch 提供的推测性提取行为。

`preconnect`

preconnect 提示用于从以下位置与另一个来源建立连接：用于提取关键资源的位置例如，您可能正在托管您的 CDN 或其他跨源上的图片或资源：

<link rel="preconnect" href="https://example.com">

使用 preconnect，您预计浏览器计划连接到 特定跨域服务器的推出，并且浏览器应尽快打开该连接，最好是在等待 HTML 解析器或预加载扫描器来执行此操作。

如果网页上有大量跨源资源，请使用 preconnect 对当前网页而言最重要的资源。

Chrome 开发者工具“网络”面板中某项资源的连接时间的屏幕截图。连接设置包括等待时间、代理协商、DNS 查找、连接设置和 TLS 协商。 — </ph> Chrome 的“网络”面板中的连接时间可视化图表开发者工具。红色方框中的时间是设置与跨源服务器建立连接，`preconnect` 可以将该服务器而不是在部署之前来发现跨源资源的发现

Google Fonts 是 preconnect 的常见用例。Google Fonts 推荐 preconnect 到为您提供服务的 https://fonts.googleapis.com 网域 @font-face 声明，并传递到 https://fonts.gstatic.com 域，提供字体文件。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

crossorigin 属性用于指明某个资源是否必须使用跨域资源共享 (CORS) 进行提取。使用 preconnect 提示（如果从来源下载的资源使用 CORS（例如字体文件），则需要将 crossorigin 属性添加到 preconnect 提示。

`dns-prefetch`

尽早打开与跨域服务器的连接缩短初始网页加载时间，那么使用 API 访问同时与多个跨源服务器建立连接。如果您担心您可能会过度使用 preconnect，更便宜的资源提示是 dns-prefetch 提示。

根据其名称，dns-prefetch 不会与跨源建立连接而是提前为其执行 DNS 查找。DNS lookup 发生在域名解析为底层 IP 地址时。虽然设备和网络级别的 DNS 缓存层有助于但制作过程通常较快，但仍然需要一些时间。

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

DNS 查找成本相当低廉，而且由于其成本相对较低，在某些情况下，它们可能比 preconnect 更合适的工具。在特别值得注意的是，在存在导航到您认为用户可能会关注的其他网站。 dnstradamus 就是这样一种工具，它可以使用 JavaScript、并使用 Intersection Observer API 将 dns-prefetch 提示注入当指向其他网站的链接滚动到用户的视口

`preload`

preload 指令用于发起资源的提前请求呈现网页所需的资源：

<link rel="preload" href="/lcp-image.jpg" as="image">

preload 指令应仅限于延迟发现的关键资源。最常见的用例是字体文件，以及通过 @import 提取的 CSS 文件或 CSS background-image 资源，而这些资源可能是最大的 Contentful Paint (LCP) 候选项。在这种情况下，被预加载扫描器发现，因为外部资源中引用了相应资源资源。

</ph> 注意：如果您使用 preload 来下载由 <img> 元素指定的图片确保添加 imagesrcset 属性添加到 preload 提示，以便下载正确的当前视口。您还应排除src 属性，这样不支持自适应预加载的浏览器就不会下载后备图片

与 preconnect 类似，preload 指令要求使用 crossorigin 属性。如果您不将 crossorigin 属性（或为非 CORS 请求添加该资源），然后配置资源浏览器下载了两次，浪费了原本可能花在其他资源上的成本。

<link rel="preload" href="/font.woff2" as="font" crossorigin>

重要提示：在 preload如果 as 属性的 <link> 元素缺失。有关 as 属性值的列表，请参阅关于 as 属性值的 MDN 文档。

在前面的 HTML 代码段中，浏览器指示了预加载 /font.woff2（即使 /font.woff2 位于同一网域）。

</ph> 注意：preload 指令是一条强大的性能优化功能 - 事实上，这种优化方式可能会被过度使用。资源使用 preload 指令下载的文件实际上以高优先级下载，如果过度使用，preload 可能会创建从而避免带宽争用，从而对网页加载速度产生负面影响。

`prefetch`

</ph> 重要提示：这是对 prefetch 资源提示。因此，本节不讨论深入详细介绍您应该考虑的一些注意事项和权衡。本课程的后续单元会详细介绍 prefetching 以及近期所需的低优先级资源，以及 prefetching 以加快以后的导航速度。

prefetch 指令用于发起针对可能用于未来导航的资源：

<link rel="prefetch" href="/next-page.css" as="style">

该指令基本上遵循与 preload 指令相同的格式，只有而 <link> 元素的 rel 属性则使用值 "prefetch"。不过，与 preload 指令不同，prefetch 在很大程度上是推测性的，您开始提取某项资源以便将来导航时也可能不会发生

有时，prefetch会对您大有裨益，例如，如果您确定了您网站上大多数用户都遵循的针对这些未来页面为渲染关键型资源的 prefetch 有助于缩短其加载时间

</ph> 注意：鉴于 prefetch，如果用户未导航到网页最终需要预提取的资源依赖你的分析数据或有关您网站使用模式的其他数据源，您可以自行决定建议您使用 prefetch。或者，您可以使用 Save-Data 会提示为符合以下条件的用户选择停用预提取：指定减少流量消耗的首选项。

提取 Priority API

您可以通过 Fetch Priority API 的 fetchpriority 属性使用提高资源的优先级您可以将该属性与 <link> 搭配使用， <img> 和 <script> 元素。

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

重要提示：fetchpriority 属性尤其是在用于网页的 LCP 图片时有效。通过提高具有此属性的 LCP 图片，您可以借助相对较弱的不费力。

默认情况下，以较低优先级提取图片。布局之后，如果如果系统发现图片位于初始视口内，则会将优先级提高到高优先级。在前面的 HTML 代码段中，fetchpriority 立即用于指示浏览器下载较大的 LCP 图片，并使用高优先级；而不太重要的缩略图则会以较低优先级下载

现代浏览器分两个阶段加载资源。第一阶段关键资源，在所有阻塞性脚本下载完毕且。在此阶段，低优先级资源可能会延迟到下载。通过使用 fetchpriority="high"，您可以提高资源，使浏览器能够在第一阶段下载该资源。

资源提示演示

知识测验

preconnect 资源提示有什么作用？

打开与跨源服务器的连接，包括 DNS 查找；以及连接和 TLS 协商其他方法会发现它

正确！

仅对跨源服务器执行 DNS 查找。

请重试。

您可以使用 Fetch Priority API 实现哪些功能？

指定当前网页的 HTML 的下载优先级。

请重试。

为 <link> 指定相对优先级， <img> 和 <script> 元素。

正确！

何时应使用 prefetch 提示？

针对用户可能需要的任何及所有资源或页面，无论是否因为他们将来确实需要用到这些信息

请重试。

如果您对相应资源或网页非常有把握，您想要预提取的内容

正确！

如果用户未明确表示首选减少数据量。

正确！

后续内容：图片效果

现在，您对自己所学的知识很有信心网页 HTML 的一般性能考虑因素，<head> 元素和资源提示。不过，还有一些额外的优化措施页面通常加载的不同资源类型各不相同。接下来，图片性能将在下一单元中介绍尽可能快速加载网站图片，用户的设备