主持人 > 博客 > 管理 > 预加载、预取等标签

预加载、预取等标签

有 提高网络性能的多种方法。 其中之一是预加载稍后需要的内容。 CSS预处理、整页预渲染或域名解析。 我们提前做好一切，然后立即显示结果！ 听起来很酷。

更酷的是它的实现非常简单。 五个标签给浏览器一个命令来执行初步操作：

<link rel="prefetch" href="/zh-CN/style.css" as="style" />
<link rel="preload" href="/zh-CN/style.css" as="style" />

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

<link rel="prerender" href="https://example.com/about.html" />


让我们简要解释一下它们的作用以及何时使用它们。

跳到： 预紧 · 预取 · 预连接 · dns 预取 · 预渲染

预紧

<link rel= "preload"> 告诉浏览器尽快加载和缓存资源（例如脚本或样式表）。 当页面加载后几秒钟需要资源并且您希望加快该过程时，这非常有用。

加载后浏览器不会对资源执行任何操作。 不执行脚本，不应用样式表。 该资源被简单地缓存并根据请求立即可用。

句法

<link rel="preload" href="/zh-CN/style.css" as="style" />

href 指向您要下载的资源。

as 可以是任何可以在浏览器中下载的内容：

  • style 对于样式表，
  • script 对于脚本来说，
  • font 对于字体，
  • fetch 对于使用加载的资源 fetch() или XMLHttpRequest,
  • 查看完整列表 在 MDN 上.

指定属性很重要 as – 这有助于浏览器正确确定下载的优先级和安排下载时间。

何时使用

当不久的将来需要资源时使用预加载。 例如：

  • 来自外部文件的非标准字体： 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    默认情况下， comic-sans.woff2 仅在下载并解析后才开始加载 index.css。 为了避免等待太久，您可以使用以下命令提前下载字体 <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • 如果你根据方法来区分你的风格 关键 CSS 分为两部分，关键部分（用于立即渲染）和非关键部分： 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    通过这种方法，非关键样式只会在 JavaScript 运行时开始加载，这可能会在渲染后几秒钟发生。 而不是等待 JS 使用 <link rel= "preload">提前开始下载：

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/zh-CN/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

不要过度使用预加载。 如果连续加载所有内容，网站不会神奇地加速；相反，它会阻止浏览器正确规划其工作。

不要与预取混淆。 不使用 <link rel= "preload">，如果您在页面加载后不需要立即使用该资源。 如果您稍后需要它，例如下一页，请使用 <link rel= "prefetch">.

商品详细信息

这是必需的标签 与所有其他标签不同，由浏览器执行（如果支持的话） 与预加载有关。 浏览器必须下载指定的资源 <link rel="preload">。 在其他情况下，它可能会忽略预加载，例如，如果它在慢速连接上运行。

优先。 浏览器通常为不同的资源（样式、脚本、字体等）分配不同的优先级，以便首先加载最重要的资源。 在这种情况下，浏览器通过属性确定优先级 as。 对于 Chrome 浏览器，您可以查看 完整的优先级表.

预加载、预取等标签

预取

<link rel= "prefetch"> 要求浏览器在后台下载并缓存资源（例如脚本或样式表）。 加载以低优先级进行，因此不会干扰更重要的资源。 如果下一页需要该资源并且您想提前缓存它，这非常有用。

在这里，浏览器在加载后也不对资源执行任何操作。 不执行脚本，不应用样式表。 该资源被简单地缓存并根据请求立即可用。

句法

<link rel="prefetch" href="/zh-CN/style.css" as="style" />

href 指向您要下载的资源。

as 可以是任何可以在浏览器中下载的内容：

  • style 对于样式表，
  • script 对于脚本来说，
  • font 对于字体，
  • fetch 对于使用加载的资源 fetch() или XMLHttpRequest,
  • 查看完整列表 在 MDN 上.

指定属性很重要 as - 这有助于浏览器正确地确定下载的优先级并安排下载。

何时使用

从其他页面加载资源，如果您需要来自另一个页面的资源，并且想要预加载它以加快该页面的渲染速度。 例如：

  • 您有一家在线商店，40% 的用户离开主页进入产品页面。 使用 <link rel= "prefetch">，加载CSS和JS文件来渲染产品页面。
  • 您有一个单页面应用程序，不同的页面加载不同的包。 当用户访问页面时，可以预加载其链接到的所有页面的包。

这个标签很可能可以在任何程度上安全地使用。。 浏览器通常以最低优先级安排预取，因此不会打扰任何人。 请记住，它会消耗用户流量，这可能会花费金钱。

不适用于紧急请求。 不使用 <link rel= "prefetch">，当几秒钟内需要资源时。 在这种情况下，使用 <link rel= "preload">.

商品详细信息

可选标签。 浏览器不需要遵循此指令；它可能会忽略它，例如，在连接速度较慢时。

Chrome 中的优先级。 在 Chrome 中 <link rel= "prefetch"> 通常以最低优先级执行（参见 完整的优先级表），也就是说，在加载其他所有内容之后。

预连接

<link rel= "preconnect"> 当您希望将来加快连接设置时，会要求浏览器提前连接到域。

如果浏览器从新的第三方域检索任何资源，则必须建立连接。 例如，如果它从 CDN 加载 Google Fonts、React 字体，或从 API 服务器请求 JSON 响应。

建立新连接通常需要几百毫秒。 完成一次，但仍然需要时间。 如果您提前建立了连接，您将节省时间并更快地从该域下载资源。

句法

<link rel= "preconnect" href="https://api.my-app.com" />

href 表示您要确定其 IP 地址的域名。 可以用前缀 (https://domain.com）或没有它（//domain.com).

何时使用

用于很快需要的域 从那里下载重要的样式、脚本或图像，但您还不知道资源 URL。 例如：

  • 您的应用程序托管在 my-app.com 并发出 AJAX 请求 api.my-app.com：你事先不知道具体的查询，因为它们是由 JS 动态生成的。 这里使用标签来预连接域是非常合适的。
  • 您的应用程序托管在 my-app.com 并使用谷歌字体。 它们的下载分两步：首先，从域下载 CSS 文件 fonts.googleapis.com，然后该文件请求字体 fonts.gstatic.com。 您无法知道具体的字体文件来自哪些 fonts.gstatic.com 直到加载CSS文件时才会需要，所以我们只能提前进行初步连接。

使用此标签可以加快某些第三方脚本或样式的速度 由于预先建立的连接。

不要过度使用。 对于客户端和服务器来说，建立和维护连接都是一项昂贵的操作。 最多可将此标签用于 4-6 个域。

商品详细信息

可选标签。 浏览器不需要遵循此指令，并且可以忽略它，例如，如果已经建立了许多连接或在某些其他情况下。

连接过程包括哪些内容？。 要连接到每个站点，浏览器必须执行以下操作：

  • DNS解析。 查找服务器IP地址（216.58.215.78）对于指定的域名（google.com).
  • TCP握手。 交换数据包（客户端→服务器→客户端）以发起与服务器的TCP连接。
  • TLS 握手（仅限 HTTPS 站点）。 两轮数据包交换（客户端 → 服务器 → 客户端 → 服务器 → 客户端）以启动安全 TLS 会话。

注意：HTTP/3 将改进并加速握手机制，但还有很长的路要走。

dns 预取

<link rel= "dns-prefetch"> 如果您即将连接到该域并希望加快初始连接速度，则要求浏览器提前对该域执行 DNS 解析。

如果浏览器要从新的第三方域检索任何资源，则必须确定该域的 IP 地址。 例如，从 CDN 加载 Google Fonts、React 字体，或从 API 服务器请求 JSON 响应。

对于每个新域，DNS 记录解析通常需要大约 20-120 毫秒。 这只会影响从给定域加载第一个资源，但仍然会引入延迟。 如果我们提前进行DNS解析，我们会节省时间并更快地加载资源。

句法

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href 表示要为其设置IP地址的域名。 可以用前缀 (https://domain.com）或没有它（//domain.com).

何时使用

用于很快需要的域 从那里下载浏览器事先不知道的资源。 例如：

  • 您的应用程序托管在 my-app.com 并发出 AJAX 请求 api.my-app.com：你事先不知道具体的查询，因为它们是由 JS 动态生成的。 这里使用标签来预连接域是非常合适的。
  • 您的应用程序托管在 my-app.com，并使用 Google 字体。 它们的下载分两步：首先，从域下载 CSS 文件 fonts.googleapis.com，然后该文件请求字体 fonts.gstatic.com。 您无法知道具体的字体文件来自哪些 fonts.gstatic.com 直到加载CSS文件时才会需要它，所以我们只能提前进行初步连接。

使用此标签可以加快某些第三方脚本或样式的速度 由于预先建立的连接。

请注意类似的特征 <link rel= "dns-prefetch"/> и <link rel= "preconnect">。 在一个域中将它们一起使用通常没有意义： <link rel= "preconnect"> 已经包括 <link rel= "dns-prefetch"/> 以及更多。 这在两种情况下是合理的：

  • 您想支持旧版浏览器吗？. <link rel= "dns-prefetch" /> 由...支持 从 IE10 和 Safari 5 开始. <link rel= "preconnect"> 在 Chrome 和 Firefox 中支持了一段时间，但仅在 11.1 和 XNUMX 中添加到 Safari IE/Edge 仍不支持。 如果您需要支持这些浏览器，请使用 <link rel= "dns-prefetch" /> 作为备份选项 <link rel= "preconnect">.
  • 您想要加速与 4-6 个以上域的连接。 标签 <link rel= "preconnect"> 不建议使用超过 4-6 个域，因为建立和维护连接是一项昂贵的操作。 <link rel= "dns-prefetch" /> 消耗的资源较少，因此如有必要，请使用它。

商品详细信息

可选标签。 浏览器不需要遵循此指令，因此它可能不会执行 DNS 解析，例如，如果页面上有很多此类标签或其他情况。

什么是 DNS。 互联网上的每台服务器都有一个唯一的IP地址，看起来像 216.58.215.78。 站点名称通常输入到浏览器的地址栏中（例如， google.com），DNS（域名系统）服务器将其与服务器的 IP 地址（216.58.215.78).

要确定 IP 地址，浏览器必须查询 DNS 服务器。 连接到新的第三方域时需要 20−120 毫秒。

DNS 被缓存，尽管不是很可靠。 某些操作系统和浏览器会缓存 DNS 查询：这将节省重复查询的时间，但不能依赖缓存。 在 Linux 上它通常根本不起作用。 Chrome有一个DNS缓存，但它只能持续一分钟。 Windows 会将 DNS 响应缓存五天。

预渲染

<link rel= "prerender"> 要求浏览器下载 URL 并将其显示在不可见的选项卡中。 当用户单击链接时，应立即显示该页面。 如果您确定用户将访问某个页面并希望加快其显示速度，这非常有用。

尽管（或由于）该标签具有非凡的有效性，但在 2019 年 <link rel= "prerender"> 主要浏览器的支持很差。 查看更多详情。 下面.

句法

<link rel="prerender" href="https://my-app.com/pricing" />

href 指向您想要在后台开始渲染的 URL。

何时使用

当你确实确定用户会转到某个页面时。 如果您有一个“隧道”，页面 A 的 70% 访问者可以通过该“隧道”转到页面 B，那么 <link rel= "prerender"> 在页面 A 上将有助于非常快速地显示页面 B。

不要过度使用。 预渲染在带宽和内存方面非常昂贵。 不使用 <link rel= "prerender"> 超过一页。

商品详细信息

可选标签。 浏览器不需要遵循此指令，并且可能会忽略它，例如，在连接速度较慢或可用内存不足时。

为了节省内存 Chrome 不进行完整渲染和 仅预加载 NoState。 这意味着 Chrome 会加载页面及其所有资源，但不会呈现或执行 JavaScript。

Firefox 和 Safari 根本不支持此标签。 这并不违反规范，因为浏览器不需要遵循此指令； 但还是很难过。 实施错误 Firefox 已经开放七年了。 有报道称 Safari 也不支持这个标签.

总结

使用：

  • <link rel= "preload"> - 当您在几秒钟内需要资源时
  • <link rel= "prefetch"> - 当您需要下一页的资源时
  • <link rel= "preconnect"> - 当您知道您很快将需要某个资源，但您还不知道其完整 URL 时
  • <link rel= "dns-prefetch"> - 同样，当您知道您很快将需要某个资源，但您还不知道其完整 URL（对于较旧的浏览器）
  • <link rel= "prerender"> — 当您确定用户会转到某个页面，并且您想要加快其显示速度时

来源： habr.com

添加评论