预加载、预连接、预取：通过资源提示提高站点性能

现代网络浏览器使用各种不同的技术来提高网站的整体性能 - 从优先考虑最重要的资源并首先获取它们到猜测用户接下来将访问哪个页面。

但是，您不应该依赖尽可能先进的浏览器来做出与您网站性能有关的所有决定。

作为网站所有者，您知道哪些资源最重要以及您网站上的实际用户旅程是什么。 为了提高网站的整体性能、感知速度和用户体验，您可以利用这些知识来帮助浏览器更快地加载您的页面。

这就是资源提示的来源。

在以下几行中，我们将了解它们以及如何以最佳方式利用它们的优势。

让我们深入了解它。

浏览器的工作原理（简而言之）

为了更好地理解资源提示以及它们适用的地方，让我们快速了解浏览器实际加载内容的方式。

我们可以将浏览器加载页面的整个过程分为三个步骤：

• 建立连接；
• 下载、解析和渲染代码；
• 使页面具有交互性；

在第一阶段，浏览器需要与服务器建立连接才能下载资源。 这包括查找域名并将其解析为 IP 地址、建立与服务器的连接以及加密连接以确保安全。

一切完成后，浏览器可以继续下载和解析信息，构建文档对象模型 (DOM) 和 CSS 对象模型 (CSSOM)，然后渲染内容。

最后一部分是使页面具有交互性。 上面提到的所有过程都发生在主线程中。 因此，在浏览器的主线程完成解析、渲染和绘制页面之后，是时候处理延迟的 JavaScript 文件以使页面可用于滚动、触摸和其他交互。

简而言之，这就是每次加载页面时的幕后过程。

让我们看看如何通过集成资源提示对每个阶段产生积极影响。

资源提示：预取、预连接、预加载

顾名思义，资源提示是告诉浏览器应该如何处理特定资源或网页的提示或指令。 换句话说，这组指令允许您帮助浏览器确定需要获取和呈现的源或资源的优先级。

所有资源提示都使用链接元素的rel属性，您可以在 HTML 文档的头部找到该属性。

在您的网站上集成这些 HTML 代码片段将允许浏览器开始加载所选文件，而不是浏览器通过正常的页面加载过程找到它们。

现在，我们已经掌握了基础知识，让我们继续您在这里的部分 - 资源提示的概述、它们的好处以及何时使用它们。

预取

link rel=prefetch是一个低优先级的资源提示，它允许浏览器获取以后可能需要的资源并将它们存储在浏览器的缓存中。

因为prefetch设置了非常低的优先级，所以不要将此提示用于高度重要的文件。

一个很好的用例是利用预取来改善后续页面的加载时间。 例如，您可以在用户身份验证期间应用预取指令。 这样，您可以利用他们输入凭据所花费的时间来预加载他们接下来将看到的页面所需的资源。

通过预测访问者在您网站上的步骤并预取资源，您可以改进诸如首次内容绘制和互动时间等指标。 Netflix 做了一些事情，将他们的互动时间减少了 30%。

到目前为止，我们提到的所有内容都与预取有关，也称为链接预取。 但是还有另外两种同样重要的预取类型，我们不得不提一下：

1.DNS预取
在连接到主机（源服务器）之前，浏览器需要执行 DNS 查找以将主机名（URL）转换为 IP 地址。

虽然这通常只需要几毫秒，但如果网站从第三方域名加载文件，大多数网站都会这样做，浏览器必须为每个域执行 DNS 查找。 一些网站（例如，新闻网站）使用大量外部资源，这意味着每个页面可能需要进行数十次 DNS 查找。

在这些情况下，使用dns-prefetch提示可能会节省几毫秒，因为该指令会告诉浏览器立即启动该进程，而不是在加载过程中稍后发现需要时。

正如 Web Almanac 2021 中所建议的，一个好的做法是将dns-prefetch与preconnect提示结合起来以获得最佳结果。 您可以在我们讨论preconnect的部分中看到原因。

2. 预渲染
预渲染与预取非常相似，因为它优化了用户下一步可能导航到的资源。 不同之处在于prerender 实际上渲染的是整个页面而不是特定的资源。

预连接

与dns-prefetch一样， preconnect指令帮助浏览器在向服务器发送初始请求之前建立早期连接。

但是，预连接提示更进一步。 在执行 DNS 查找的同时，它还包括 TLS 协商和 TCP 握手。 这反过来又消除了往返延迟并节省了更多时间。

但问题来了：

如果preconnect完成dns-prefetch所做的一切，以及以上，我为什么要首先使用dns-prefetch呢？

在大多数情况下， preconnect是dns-prefetch的首选选项，但问题是某些浏览器不支持preconnect ：

资料来源：caniuse.com

好处是您可以一起使用它们以充分利用它们。 您可以从支持它的浏览器中的预连接中受益，并回退到 dns-prefetch ：

根据谷歌：

早在 2019 年，Chrome 就通过预先连接到重要来源，设法将其交互时间缩短了近 1 秒。

预载

在解释preload指令是如何工作的之前，我们必须弄清楚一些事情。

尽管预加载经常被称为“资源提示”，但事实并非如此。 Preload 是一种声明式获取，对于浏览器来说是强制性的，使它更像是一个命令而不是一个提示。

话虽如此，预加载用于强制浏览器在浏览器发现资源之前下载资源，因为它对页面至关重要。

preload指令最适用于属于关键渲染路径但浏览器不易发现的资源。 例如，字体、CSS 或关键 JavaScript。

与dns-prefetch和preconnect提示的另一个区别是，虽然它们只需要rel和href属性，但preload更复杂。 您必须添加as属性，该属性指示您要预加载的资源的内容类型。

根据 Google 的工程经理 Addy Osmani 的说法，在强制预加载时提供as属性：

以下是您可以指定的as值的完整列表：

包含as属性有助于浏览器根据其类型设置预取资源的优先级，并确定该资源是否已存在于缓存中。

查看 Chrome 资源优先级和调度文档，详细了解不同资源类型的优先级。

对于某些资源，例如字体，您还必须包含crossorigin属性。

crossorigin属性将请求的模式设置为 HTTP CORS 请求。 CORS（跨域资源共享）是一种机制，它允许服务器指示浏览器应允许加载资源的来源以外的任何来源。 我们不会对此进行深入探讨，因为它不是本文的重点，但您可以在此处找到更多信息。

和as属性类似，预加载不带跨域的字体会双重获取。 这是 Addy Osmani 关于该主题的文章的另一段摘录：

更多资源提示，更多问题

阅读到目前为止的所有内容，您可能会开始认为使用尽可能多的资源提示只会导致浏览器快速加载您的页面。

不幸的是，这种情况并非如此。

以下是在集成资源提示时应考虑的一些挫折：

1. 预取可能会增加数据消耗

尽管prefetch设置了较低的下载优先级，但这并不意味着它是无害的。 它的使用可能会增加您网站上的数据消耗，这可能会给您（服务器上的流量增加）和您的用户（不必要的资源过度消耗）带来问题。 此外，您最终可能会加载最终可能不会使用的额外字节。 因此，在集成之前请三思。

2. 预渲染会造成带宽浪费

prerender的赌注甚至比prefetch更大，因为您提前下载了整个页面。 这使得提示资源繁重，并可能导致带宽浪费，尤其是在移动设备上。 最糟糕的是，如果用户不请求页面，他们甚至可能看不到提示的效果。

3. 预连接可能会导致额外的 CPU 使用率

虽然preconnect是一个低优先级的提示，但它仍然可能会损害您网站的性能。 如果已建立的连接没有被快速使用（在 Chrome 上是 10 秒内），那么preconnect指令只会增加额外的 CPU 使用率，并且会被浏览器自动关闭。 此外，您应该谨慎使用preconnect ，因为加密证书的大小约为 3 KB，这将与带宽竞争其他重要资源。

4. Preload 会覆盖浏览器分析器设置的优先级

preload是一个强大的指令，因为它允许您让浏览器立即下载资源。 但是，现代 Web 浏览器非常擅长对资源进行优先级排序，因此过度使用预加载可能会导致负面结果。 例如，如果您添加与异步资源 URL 匹配的preload指令，浏览器将更快地获取它，因此它会更快地解析它，通过在页面加载的早期中断主线程来消除异步属性的效果。

回顾

我们在本文中涵盖了很多内容，因此让我们快速回顾一下最重要的几点：

• dns-prefetch和preconnect用于确定域名的优先级（例如，https://example.com）。
• prefetch和preload用于优先加载资源。 虽然预取用于改善后续页面的加载时间，但预加载在当前页面的关键资源上效果最佳。
• prerender引用整个页面（例如，blog.html）。
• prefetch 、 prerender和preconnect是资源提示，它们在浏览器认为合适的时候执行。 preload指令是浏览器必需的命令。
• 使用preload时，不要忘记提供as和crossorigin属性以避免重复获取。
• 尽管资源提示是低优先级的说明，但它们仍然对您网站的性能构成威胁。 适度使用它们，仅在必要时使用。
• preload是一个强大的指令，可以覆盖浏览器分析器的优先级。 不要忘记现代浏览器非常擅长对资源进行优先级排序，因此请谨慎使用预加载“提示”。

使用新获得的有关资源提示的知识来加快内容和资产的交付并提高您网站的整体性能。 每次进行更改时，不要忘记在现实世界中测试您的网站（关注现场数据）。