做前端性能优化，还不知道什么是Preload、Prefetch、Preconnect？

今天，我们将探讨当前的资源提示和指令，这是提高网站或 Web 应用程序性能的另一种好方法。您可能听说过Preload、Prefetch、Preconnect，但我们将会更加深入地了解它们之间的不同之处，以及如何从中获的性能提升。这些优点是，它们允许 Web 开发人员在用户浏览页面时优化资源交付、减少往返行程和获取资源以更快地交付内容。

`preload`

预加载是一种新的 Web 标准，它提供了对当前导航获取特定资源方法的更多控制。这是 2016 年 1 月弃用的子资源预取的更新版本。例如，此指令可以在元素中定义。通常，它最适合最重要的资源，如图像、CSS、JavaScript 和字体文件。这与浏览器预加载不一，在浏览器预加载中，仅预加载 HTML 中声明的资源。该指令实际上克服了这一限制，并允许通过CSS和JavaScript启动的资源进行预加载，并定义何时应用每个资源。<link> <link rel="preload">

preload与它侧重于获取当前导航的资源不同。侧重于为下一个导航获取资源。还必须注意，不要阻止窗口的事件。

优点：

允许浏览器设置资源优先级，因此允许 Web 开发人员优化某些资源的交付。
使浏览器能够确定资源类型，因此它可以判断将来是否可以重用相同的资源。
浏览器可以通过引用属性中定义的内容来确定请求是否符合内容安全策略。as
浏览器可以根据资源类型（例如）发送相应的标头。Acceptimage/webp

例子#

下面是预加载图像的一个非常基本的示例。

<link rel="preload" href="image.png">

下面是预加载字体的示例。如果要预加载具有启用 CORS 的资源的链接，还必须包括该属性。crossorigin

<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>

下面是使用标记和 JavaScript 预加载样式表的示例。

<!-- Via markup -->
<link rel="preload" href="/css/mystyles.css" as="style">
<!-- Via JavaScript -->
<script>var res = document.createElement("link");res.rel = "preload";res.as = "style";res.href = "css/mystyles.css";document.head.appendChild(res);
</script>

有一个有趣的解决方法，以获得异步加载的样式使用标记。这意味着它是非渲染阻止！

preload浏览器支持

preload支持于 2016 年 4 月添加到Chrome 50中，并且还得到 Opera 37 及更上面的支持。

阅读我们关于预加载指令的完整深入文章。

`prefetch`

prefetch是一个低优先级的资源提示，允许浏览器在后台（空闲时间）提取以后可能需要的资源，并将其存储在浏览器的缓存中。一旦页面加载完成后，它开始下载其他资源，如果用户然后点击预取的链接，它会立即加载内容。有三种不同类型的预取，链接，DNS和预发型，我们将在下面进入更多。

如上所述，prefetch取允许浏览器获取资源，将它们存储在缓存中，假设用户将请求它们。浏览器在 HTML 元素或 HTTP 标头中寻找，例如：

Html： <link rel="prefetch" href="/uploads/images/pic.png">
HTTP 标头： Link: </uploads/images/pic.png>; rel=prefetch

这种技术有可能加快许多交互式网站的速度，但不可能在任何地方都起作用。对于某些网站，很难猜测用户下一步可能做什么。对于其他人，如果获取得太快，数据可能会过时。同样重要的是要小心不要太早预放文件，或者您可以减慢用户正在查看的页面速度。 - 谷歌开发者

除了Safari、IOS Safari 和Opera Mini 之外，大多数现代浏览器都支持链接。如果您尝试测试，Chrome 和 Firefox 也会在网络面板中显示预取的资源。prefetch

`dns-prefetch`

DNS 预取允许浏览器在用户浏览时在后台的页面上执行 DNS查找。这最大限度地减少了延迟，因为一旦用户单击链接，DNS 查找就已发生。通过将标记添加到链接属性，可以将 DNS 预取添加到特定 URL。我们建议在 Google 字体、Google 分析和 CDN 等方面使用此功能。rel="dns-prefetch"

DNS 请求在带宽方面非常小，但延迟可能相当高，尤其是在移动网络上。通过推测性地预提取 DNS 结果，延迟可以显著减少，在特定时间，例如当用户单击链接时。在某些情况下，延迟可以减少一秒钟。 - Mozilla 开发人员网络

它还可用于重定向背后的资源。请参阅下面的示例。

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.domain.com">

还必须注意，当您在地址栏中键入诸如 DNS 预解和TCP 预连接等功能时，Google Chrome 已经执行过类似的事情。太酷了！您可以通过访问来查看列表。chrome://dns/

您还可以利用 PageSpeed 筛选器，insert_dns_prefetch所有域的页眉中自动显示标记。<link rel="dns-prefetch">

DNS 预处理也支持大多数现代浏览器，除了 Opera Mini。

Prerendering

预发自给与预发非常相似，因为它收集了用户可能导航到的下一个资源。区别在于预渲染实际上呈现整个页面的背景，文档的所有资产。下面是一个示例。

<link rel="prerender" href="https://www.keycdn.com">

应用程序可以使用预渲染提示来指示下一个可能的 HTML 导航目标：用户代理将提取并处理指定的资源作为 HTML 响应。若要使用适当的请求标头获取其他内容类型，或者不需要 HTML 预处理，应用程序可以使用预取提示。 - W3C

您希望在预渲染时更加小心，因为预渲染资源非常繁重，并可能导致带宽浪费，尤其是在移动设备上。还必须注意，您不能使用 Chrome DevTools 来测试此内容，而是可以看到页面是否正在预渲染。您也可以在一个prerender-test.appspot.com。chrome://net-internals/#prerender

prerender 仅一些浏览器支持，除了 Mozilla 火狐， Safari， Ios Safari， Opera mini 和 Android 浏览器。

除了额外的资源，还有一些额外的缺点，使用预取，如批评的隐私。

即使谷歌说它禁止了标签，网络统计信息也可能被夸大。
用户可能会通过下载更多页面或从未请求的网站（随着驱动下载变得更加先进和多样化而变得更加复杂），面临更多的安全风险。
如果预取访问未经授权的内容，用户可能会违反其网络或组织的可接受使用策略。

请务必查看有关使用预取资源提示的深入帖子。

`preconnect`

我们要讨论的最后一个资源提示是。该指令允许浏览器在HTTP 请求实际发送到服务器之前设置早期连接。这包括 DNS 查找、TLS 协商、TCP 握手。这反过来又消除了往返延迟，并节省了用户的时间。

预连接是优化工具箱中的重要工具...它可以从请求路径中消除许多昂贵的往返 - 在某些情况下，可将请求延迟减少数百甚至数千毫秒。 - 伊利亚·格里戈里克

可以在 HTML 中将直接添加到链接标记中作为属性。它也可以通过 HTTP 标头传递，也可以由 JavaScript 基于用户活动调用。下面是启用 CDN URL 的示例。

<link href="https://cdn.domain.com" rel="preconnect" crossorigin>

下面是使用 Google 字体的示例。通过添加提示，它将与 CSS 请求并行启动请求，从而允许立即发送字体请求。在此特定方案中，从关键路径中删除了三个RTT，并消除了超过一半的延迟秒。查看更多关于lya格里戈里克关于消除RTTS与预连接的详细帖子。preconnectpreconnectfonts.gstatic.compreconnect

高效和深思熟虑地使用不仅有助于优化您的网站，而且将防止您充分利用资源。一些现代浏览器支持，除了互联网浏览器， Safari， iOS Safari 和 OperaMini 。preconnectpreconnect

请务必查看有关使用预连接资源提示的深入帖子。

总结

希望现在你更了解什么，和是，以及如何可以利用他们，以加快内容和资产的交付，使用它们的战略方式。在接下来的几个月里，该指令将获得更多的支持，而 Web 开发人员也开始采用该指令，这将是令人振奋的。preloadprefetchpreconnectpreload