链接预取跨子域有效吗?

时间:2019-12-28 19:48:08

标签: html link-prefetch

当我的浏览器在https://subdomain.example.com上时,我注意到以下内容并没有明显提高性能:

<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />

当我单击链接访问https://example.com时,由于加载了app.jsapp.css,我仍然在Chrome网络标签中看到很长的延迟。

有时看到正确使用的预取html资源。在其他时候,似乎服务人员正在加载它。这引出了我的另一个问题:

服务人员如何发挥浏览器对预取资源的使用?

我的猜测是,我对子域的使用或服务工作者的使用都在阻止浏览器使用预取的资源。


如果我禁用了Chrome中的服务人员,则可以看到使用了预取的资源,但内容下载时间仍然很长:

prefetched resources resource download time with prefetching

内容下载时间不应该为0吗?

这里是禁用预取的相同资源:

resource download time without prefetching

花费大致相同的时间,但是到第一个字节的时间更长。

3 个答案:

答案 0 :(得分:0)

在网页上添加<link rel=prefetch>会告诉浏览器下载用户将来可能需要的整个页面或某些资源(例如脚本或CSS文件)。这样可以改善“首次满足要求的涂料”和“互动时间”等指标,并且通常可以使后续导航看起来立即可以加载。

enter image description here

预取提示消耗了一些额外的字节,这些字节不是立即需要的资源,因此需要谨慎地应用此技术。仅在确信用户将需要资源时才预取资源。当用户的连接速度较慢时,请考虑不进行预取。您可以使用Network Information API进行检测。

有多种方法来确定要预取的链接。最简单的方法是预取当前页面上的第一个链接或前几个链接。也有一些库使用更复杂的方法,这将在本后https://web.dev/link-prefetch/中进行解释。

答案 1 :(得分:0)

我只能猜测。通过实验,只有您才能找到自信的答案。变量太多,无法解决。但是这里有一些想法:

  1. prefetch是浏览器的提示。浏览器可以出于某些任意原因忽略它。除此之外,它的优先级最低。
  2. 例如以防万一,请检查您的浏览器设置:
    Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
    (或类似的东西)。
  3. 如果您有机会使用移动互联网,那也可能是一个问题。
    https://www.technipages.com/google-chrome-prefetch
  4. 您从着陆页导航到example.com有多快?
  5. 检查您的服务器日志以查看它是否收到prefetch个请求。
  6. 检查您的服务器是否设置了一些奇怪的标头以响应prefetch请求。例如。 Cache-Control: no-cache。是的,我看到您有cache-control: max-age=31536000,所以如果服务器针对同一请求发送不同的标头(这很可能……几乎相同),那真是很奇怪并没有说是,并且至少可以有一些标头表明这是一个prefetch请求),但是奇怪的事情发生了。

  7. 您可能应该尝试添加crossorigin属性。例如

    <link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />

    在这里https://www.w3.org/TR/resource-hints/,您可以找到此示例

    <link rel="preconnect" href="//example.com">
    <link rel="preconnect" href="//cdn.example.com" crossorigin>
    

    与您的情况非常相关,但不幸的是没有任何解释。

  8. 在您问题的原始版本中,您提到了服务人员... 如果他们下载某些东西,或者甚至您自己手动下载一些东西,也可能是问题所在。由于prefetch

    的最低优先级

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F

    如果您使用Mozilla下载内容,则链接预取将被延迟,直到完成所有后台下载为止

    我认为Chrome也是如此。

  9. 您是否尝试过将登录页面移至根域?如果是,并且prefetch可以正常工作,则可以-子域是问题的原因。 GUI消息Status Code: 200 (from prefetch cache)可能只是一个小故障。因为最近,Chrome中的prefetch行为开始发生一些变化。我还不知道事情是否会解决。基本上,是的,很有可能您只能prefetch来自同一来源。

    https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit

答案 2 :(得分:-1)

如果您是子域,并且要从域中获取资源,则应添加以下代码

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