Geekly articles weekly

预加载，预取和其他标签

有很多方法可以提高Web性能 。 其中之一是预加载以后需要的内容。 CSS预取，整页预览呈现或域名解析。 我们会先做所有事情，然后立即显示结果！ 听起来不错。

更酷的是它很容易实现。 五个<link rel>标记为浏览器提供了执行初步操作的命令：

<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/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="/style.css" as="style" />

href指向您要下载的资源。

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

  • 样式表的样式，
  • script脚本
  • 字体，
  • 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="/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>标记不同。 浏览器必须下载<link rel="preload">指定的资源。 在其他情况下，例如在慢速连接上运行时，它可能会忽略预加载。

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



预取


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

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

句法


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

href指向您要下载的资源。

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

  • 样式表的样式，
  • script脚本
  • 字体，
  • fetch使用fetch()或XMLHttpRequest加载的资源，
  • 请参阅MDN上的完整列表。

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

何时使用


要从其他页面下载资源 ，如果您需要其他页面的资源，并且想要对其进行预加载，以加快以后渲染此页面的速度。 例如：

  • 您有一个在线商店，有40％的用户从主页转到产品页面。 加载CSS和JS文件以呈现产品页面时，请使用<link rel= "prefetch"> 。
  • 您有一个一页应用程序，并且不同的页面加载了不同的程序包。 用户访问页面时，您可以预加载该页面所引用的所有页面的程序包。

此标签可能可以在任何体积中安全使用 。 浏览器通常以最低优先级计划预取，因此不会打扰任何人。 请记住，它消耗用户流量，这可能会花费金钱。

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

详细资料


可选标签 。 不需要浏览器遵循此指令，例如在连接缓慢时，它可以忽略它。

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

预连接


<link rel= "preconnect">当您希望将来加快连接速度时，要求浏览器预连接到域。

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

建立新的连接通常需要几百毫秒。 它只完成一次，但是仍然需要时间。 如果预先建立了连接，则可以节省时间并更快地从该域下载资源。

句法


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

href表示您要确定其IP地址的域名。 您可以指定带前缀（ https://domain.com ）或不带前缀（ //domain.com ）。

何时使用


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

  • 您的应用程序托管在my-app.com上， my-app.com发出AJAX请求：您事先不知道特定的请求，因为它们是由JS动态生成的。 在这里，将标签用于与域的初步连接是非常合适的。
  • 您的应用程序托管在my-app.com并使用Google字体。 它们的下载分为两个阶段：首先，从域fonts.googleapis.com下载CSS文件，然后该文件从fonts.gstatic.com请求字体。 在下载CSS文件之前，您无法知道来自fonts.gstatic.com特定字体文件，因此我们只能提前建立初步连接。

使用此标签可以加快某些第三方脚本的速度，或者通过预先设置连接来设置样式 。

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

详细资料


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

其中包括连接过程 。 要连接到每个站点，浏览器必须执行以下步骤：

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

注意：HTTP / 3将改善并加快握手机制，但是距离还有很长的路要走。

dns预取


<link rel= "dns-prefetch">要求浏览器提前为该域预先解析DNS，如果您很快会连接到该域并希望加快初始连接的速度。

如果浏览器将从新的第三方域检索一些资源，则必须确定该域的IP地址。 例如，从CDN下载Google字体，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上， my-app.com发出AJAX请求：您事先不知道特定的请求，因为它们是由JS动态生成的。 在这里，将标签用于与域的初步连接是非常合适的。
  • 您的应用程序托管在my-app.com ，并使用Google字体。 它们的下载分为两个阶段：首先，从域fonts.googleapis.com下载CSS文件，然后该文件从fonts.gstatic.com请求字体。 在下载CSS文件之前，您无法知道来自fonts.gstatic.com特定字体文件，因此我们只能提前建立初步连接。

使用此标签可以加快某些第三方脚本的速度，或者通过预先设置连接来设置样式 。

请注意<link rel= "dns-prefetch"/>和<link rel= "preconnect">上的类似规范。 将它们一起用于同一域通常是没有意义的： <link rel= "preconnect">已经包含<link rel= "dns-prefetch"/>等等。 有两种情况可以证明这一点：

  • 您要支持较旧的浏览器 。 自IE10和Safari 5以来，一直支持<link rel= "dns-prefetch" /> 。 在Chrome和Firefox中支持<link rel= "preconnect">已有一段时间，但仅在11.1中将它添加到Safari中，而IE / Edge仍不支持 。 如果需要支持这些浏览器，请使用<link rel= "dns-prefetch" />作为<link rel= "preconnect">的<link rel= "preconnect"> 。
  • 您想加快与4-6个以上域的连接 。 不建议将<link rel= "preconnect">用于超过4-6个域，因为建立和维护连接是一项昂贵的操作。 <link rel= "dns-prefetch" />消耗较少的资源，因此在必要时使用它。

详细资料


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

什么是DNS 。 Internet上的每个服务器都有一个唯一的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">很差。 有关更多详细信息，请参见下文 。

句法


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

href指向您要在后台运行渲染的URL。

何时使用


当您真正确定该用户将转到特定页面时 。 如果您有一个“隧道”，A页面的70％的访问者可通过该隧道访问B页面，则A页面上的<link rel= "prerender">将有助于非常快速地显示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"> -当您确定用户将转到特定页面并希望加快其显示速度时

Source: https://habr.com/ru/post/zh-CN445264/

More articles:


All Articles