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

╰半橙微兮° 2022-11-25 10:09 200阅读 0赞

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

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

# #

### `preload` ###

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

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

**优点：**

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

## ##

例子 [\#][Link 3]

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

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

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

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

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

## ##

**`preload`**浏览器支持

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70][]

阅读我们关于预加载指令[`的完整深入`文章][Link 5]。

# #

### `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 和][Safari_IOS Safari]Opera Mini 之外，大多数现代浏览器都支持链接。如果您尝试测试，Chrome 和 Firefox 也会在网络面板中显示预取的资源。`prefetch`

## ##

### `dns-prefetch` ###

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

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

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

<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][TCP _Google] Chrome 已经执行过类似的事情。太酷了！您可以通过 访问 来查看列表。`chrome://dns/`

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

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

## ##

### Prerendering ###

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

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

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

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

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

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

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

# #

### `preconnect` ###

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

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

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

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

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

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

# #

### 总结 ###

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

[Link 1]: https://www.w3.org/TR/preload/
[Link 2]: https://www.keycdn.com/support/content-security-policy
[Link 3]: https://www.keycdn.com/blog/resource-hints#examples
[Link 4]: http://filamentgroup.github.io/loadCSS/test/preload.html
[Chrome 50]: https://www.chromestatus.com/feature/5757468554559488
[Opera 37]: https://caniuse.com/#search=preload
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70]: /images/20221124/b9ce5ecbc2d34bfca8e17a2665f36ff8.png
[Link 5]: https://www.keycdn.com/support/preload-directive
[Safari_IOS Safari]: https://caniuse.com/#search=prefetch
[Mozilla]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Controlling_DNS_prefetching
[TCP _Google]: https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.g120f70e9a_041
[insert_dns_prefetch]: https://modpagespeed.com/doc/filter-insert-dns-prefetch#objective
[Link 6]: https://caniuse.com/#search=dns-prefetch
[prerender-test.appspot.com]: http://prerender-test.appspot.com/
[Link 7]: https://caniuse.com/#search=prerender
[Link 8]: https://en.wikipedia.org/wiki/Link_prefetching#Issues_and_criticisms
[Link 9]: https://www.keycdn.com/support/prefetching
[Link 10]: https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
[Link 11]: https://caniuse.com/#search=preconnect
[Link 12]: https://www.keycdn.com/support/preconnect