Question

我尝试尽可能正确地使用浏览器资源提示（https://w3c.github.io/resource-hints/）。

我访问了几个大型网站，其中大多数都指定了http / https协议，例如：

<link rel="preconnect" href="https://cdn.krxd.net">
<link rel="preconnect" href="https://beacon.krxd.net">
<link rel="preconnect" href="https://ads-api.ft.com">
<link rel="preconnect" href="https://www.googletagservices.com">
<link rel="preconnect" href="https://partner.googleadservices.com">
<link rel="preconnect" href="https://securepubads.g.doubleclick.net">
<link rel="preconnect" href="https://tpc.googlesyndication.com">
<link rel="preconnect" href="https://imasdk.googleapis.com">
<link rel="preconnect" href="https://z.moatads.com">

但我发现Shopify没有在他们引用的href中指定协议

<link rel="dns-prefetch preconnect" href="//cdn.shopify.com" />
  <link rel="dns-prefetch preconnect" href="//www.google-analytics.com" />
  <link rel="dns-prefetch preconnect" href="//stats.g.doubleclick.net" />
  <link rel="dns-prefetch preconnect" href="//bat.bing.com" />
  <link rel="dns-prefetch preconnect" href="//bat.r.msn.com" />

basic W3C spec确实存在没有协议的例子。

我想知道是否不指定它是http还是https可能会产生影响/成本，因为浏览器必须获取更多信息（一个用于http，一个用于https），如2个dns信息？

Answer 1

我想知道是否不指定它是http还是https可能会产生影响/成本，因为浏览器必须获取更多信息（一个用于http，一个用于https），如2个dns信息？

不，浏览器不必发出两个请求。

这称为protocol relative URI - 浏览器将使用嵌入此页面的协议请求将其完整，绝对完整。

如果您要求使用https://嵌入此页面，那么//foo.bar/将成为https://foo.bar/;如果您仅使用http://，那么它将变为http://foo.bar/

这是一种允许网站作者以“协议不可知”的方式编写代码的方法。您可以使用此部署站点来引用外部资源，以便可以通过HTTP或HTTPS访问它，而无需修改所有这些引用。它有助于防止将站点从HTTP传输到HTTPS时可能出现的问题。如果在这种情况下使用http://...引用外部资源，浏览器将阻止它们。使用此技术，它将自动请求HTTPS版本，而无需修改代码。

Web性能 - 资源提示 - 在preconnect / dns-prefetch的href中不使用协议会有什么负面影响吗？

1 个答案: