使用 preconnect 和 dns-prefetch 加快页面加载时间

使用 preconnect 和 dns-prefetch 加快页面加载时间

使用 preconnect 和 dns-prefetch 加快页面加载时间

了解有关 rel = preconnect 和 rel = dns-prefetch 资源提示以及如何使用它们的信息。

浏览器必须先建立连接,然后浏览器才能从服务器请求资源。建立安全连接包括三个步骤:

  • 查找域名并将其解析为 IP 地址。
  • 建立与服务器的连接。
  • 加密连接以确保安全。

在上述每个步骤中,浏览器都会向服务器发送一条数据,然后服务器将响应发送回去。从起点到目的地再到终点的旅程称为往返。

根据网络条件,一次往返可能会花费大量时间。连接设置过程可能涉及多达三个往返行程,而在未优化的情况下则可能更多。

提前做好所有准备工作,会使应用程序感觉更快。这篇文章解释了如何通过两个资源提示实现这一点:<link rel=preconnect><link rel=dns-prefetch>

使用 rel=preconnect 建立早期连接

现代浏览器尽其所能预测页面将需要哪些连接,但它们无法可靠地预测所有连接。好消息是,你可以给他们一个(资源)提示。

添加rel=preconnect<link>通知浏览器你的页面打算与另一个域建立连接,并且你希望该过程尽快开始。资源将更快地加载,因为在浏览器请求时,设置过程已经完成。

资源提示之所以获得其名称,是因为它们不是强制性说明。它们提供有关你想要发生的事情的信息,但最终要由浏览器决定是否执行它们。建立并保持连接打开是一项繁重的工作,因此浏览器可能会根据情况选择忽略资源提示或部分执行它们。

通知浏览器你的意图就像<link>在页面上添加标签一样简单:

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

使用了预加载后对加载速度的提升

通过与重要的第三方来源建立早期连接,可以将加载时间缩短 100–500 ms。这些数字看似很小,但它们在用户对网页性能的看法上有所不同。

rel=preconnect用例

由于版本依赖关系,你有时会遇到这样的情况:你知道你要从一个特定的 CDN 请求一个资源,但却不知道它的确切路径。

一个版本化的URL示例

另一种常见的情况是从图像 CDN 加载图像,图像的确切路径取决于媒体查询或运行时功能检查用户的浏览器。

图像 CDN URL 的示例

在这些情况下,如果要获取的资源很重要,则希望通过预连接到服务器来节省尽可能多的时间。浏览器在页面请求之前不会下载文件,但是至少它可以提前处理连接方面的内容,从而使用户不必等待几次往返。

如何实现rel=preconnect

启动preconnect的一种方法是在文档的link中添加rel="preconnect"属性。

<head>
    <link rel="preconnect" href="https://example.com">
</head>

预连接只对原始域名以外的域名有效,所以你不应该在你的网站上使用它。

警告:只预先连接到你即将使用的关键域,因为浏览器会在 10 秒内关闭任何未使用的连接。不必要的预连接会延迟其他重要资源,因此限制预连接域的数量并测试预连接的影响。

你也可以通过链接 linkHTTP 标头发起一个 preconnect:

Link: <https://example.com/>; rel=preconnect

在 HTTP 标头中指定预连接提示的好处是它不依赖于解析的标记,并且可以由对样式表,脚本等的请求触发。例如,Google 字体会Link在样式表响应中发送标头,以预连接到托管字体文件的域。

某些类型的资源(例如字体)以匿名方式加载。对于这些,你必须crossorigin使用preconnect提示设置属性:

<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>

如果省略该crossorigin属性,则浏览器仅执行 DNS 查找。

使用 rel=dns-prefetch 提前解析域名

你可以通过网站的名称来记住它们,但服务器则通过 IP 地址来记住它们。这就是域名系统 (DNS) 存在的原因。浏览器使用 DNS 将站点名称转换为 IP 地址。这个过程—域名解析—是建立连接的第一步。

如果一个页面需要连接到许多第三方域,那么预先连接所有这些域会适得其反。preconnect提示最好只用于最关键的连接。对于其余的操作,使用<link rel="dns-prefetch=>来节省第一步的时间,即 DNS 查找,通常需要 20-120 毫秒。

DNS 解析的启动方式类似于preconnect:通过在文档的上添加<link>标签来启动<head>

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

浏览器对dns-prefetch的支持与对preconnect的支持略有不同,所以对于不支持preconnect的浏览器,dns-prefetch可以作为一种兼容写法。

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

要安全地实现浏览器兼容,请使用单独的链接标记。

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

在同一个<link>标签中实现dns-prefetch回退会导致 Safari 中preconnect被取消的 bug。

结论

这两个资源提示有助于提高页面速度,因为你知道不久将从第三方域下载一些内容,但不知道该资源的确切 URL。示例包括分发 JavaScript 库、图像或字体的 CDNs。请注意约束,只对最重要的资源使用 preconnect,对其余资源依赖于dns-prefetch