rel=prefetch

对于 rel 属性的 <link> 元素，prefetch 关键字为浏览器提供了一个提示，表明用户可能需要在将来的导航中使用目标资源，因此浏览器可以通过抢先获取和缓存资源来改善用户体验。<link rel="prefetch"> 用于同站点导航资源，或同站点页面使用的子资源。

结果会被保存在磁盘上的 HTTP 缓存中。因此，即使子资源没有被当前页面使用，预取它们也很有用。你也可以用它来预取用户可能在站点上访问的下一个文档。但是，因此你需要小心处理头部——例如，某些 Cache-Control 头部可能会阻止预取（例如 no-cache 或 no-store）。

<link rel="prefetch"> 在功能上等效于带有 priority: "low" 选项的 fetch() 调用，只不过前者通常具有更低的优先级，并且在请求中设置了 Sec-Purpose: prefetch 头部。请注意，通常情况下，浏览器会赋予预取资源比预加载资源（例如，通过 <link rel="preload"> 请求）更低的优先级——当前页面比下一个页面更重要。

prefetch 操作的获取请求会生成一个包含 HTTP 头部 Sec-Purpose: prefetch 的 HTTP 请求。服务器可以使用此头部更改资源的缓存超时时间，或执行其他特殊处理。请求还将包含 Sec-Fetch-Dest 头部，其值设置为 empty。

请求中的 Accept 头部将匹配用于普通导航请求的值。这允许浏览器在导航后找到匹配的缓存资源。

<link rel="prefetch" href="main.js" />

<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="/landing-page" />

<link rel="prefetch" href="https://news.example/article" />