Does link prefetching work across subdomains?

Question

I've been trying to use something like this to get a performance boost when clicking from a simple landing page to a heavyweight single page app:

<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" />

It seems to have no noticeable performance boost when my landing page is on a subdomain. Say, https://subdomain.example.com.

When I click on a link to visit https://example.com, I still see a long delay in the Chrome network tab as app.js and app.css are loaded:

Here's the same resource with prefetching disabled:

It takes roughly the same amount of time in total.

---

Request headers for one of the assets that loaded with prefetch cache:

General:

Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200  (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgrade

Response:

accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfront

Request:

DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36

---

My question is: If Chrome indicates that the prefetch cache is used then why is there a significant content download time?

It seems that Chrome has different kinds of caches: prefetch cache, disk cache and memory cache. Disk cache and memory cache are very fast (5ms and 0ms load times). However prefetch cache is pretty useless with 300ms download times sometimes. Can I get a technical explanation of why this happens? Is it a bug with Chrome? I am on Chrome 79.0.3945.117.

Answer 1

添加<link rel=prefetch>到网页会告诉浏览器下载用户将来可能需要的整个页面或部分资源（如脚本或 CSS 文件）。这可以改善首次内容绘制和交互时间等指标，并且通常可以使后续导航看起来立即加载。

预取提示会为不立即需要的资源消耗额外的字节，因此需要深思熟虑地应用此技术；仅当您确信用户需要资源时才预取资源。当用户连接速度较慢时，请考虑不要预取。您可以使用网络信息 API 检测到这一点。

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