通过资源提示协助浏览器

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

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

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

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

preconnect

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

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

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

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

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具“网络”面板中某项资源的连接时间的屏幕截图。连接设置包括等待时间、代理协商、DNS 查找、连接设置和 TLS 协商。 <ph type="x-smartling-placeholder">
</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 提示。

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

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 APIdns-prefetch 提示注入 当指向其他网站的链接滚动到用户的 视口

preload

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

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

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

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

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

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

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

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

prefetch

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

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

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

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

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

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

提取 Priority API

您可以通过 Fetch Priority APIfetchpriority 属性使用 提高资源的优先级您可以将该属性与 <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>

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

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

资源提示演示

知识测验

preconnect 资源提示有什么作用?

仅对跨源服务器执行 DNS 查找。
打开与跨源服务器的连接,包括 DNS 查找; 以及连接和 TLS 协商 其他方法会发现它

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

<link> 指定相对优先级, <img><script> 元素。
指定当前网页的 HTML 的下载优先级。

何时应使用 prefetch 提示?

如果用户未明确表示首选减少数据量 。
如果您对相应资源或网页非常有把握, 您想要预提取的内容
针对用户可能需要的任何及所有资源或页面,无论是否 因为他们将来确实需要用到这些信息

后续内容:图片效果

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