rel=预取

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

¥The prefetch keyword for the rel attribute of the <link> element provides a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. <link rel="prefetch"> is used for same-site navigation resources, or for subresources used by same-site pages.

结果保存在磁盘上的 HTTP 缓存中。因此，它对于预取子资源非常有用，即使当前页面没有使用它们。你还可以使用它来预取用户可能在网站上访问的下一个文档。但是，因此你需要小心标头 - 例如某些 缓存控制 标头可能会阻止预取（例如 no-cache 或 no-store）。

¥The result is kept in the HTTP cache on disk. Because of this it is useful for prefetching subresources, even if they are not used by the current page. You could also use it to prefetch the next document the user will likely visit on the site. However, as a result you need to be careful with headers — for example certain Cache-Control headers could block prefetching (for example no-cache or no-store).

注意：由于此类限制，建议你在支持的情况下使用 推测规则 API 进行文档预取。

¥Note: Because of such limitations, you are advised to use the Speculation Rules API for document prefetches instead, where it is supported.

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

¥<link rel="prefetch"> is functionally equivalent to a fetch() call with a priority: "low" option set on it, except that the former will generally have an even lower priority, and it will have a Sec-Purpose: prefetch header set on the request. Note that in general browsers will give prefetch resources a lower priority than preload ones (e.g. requested via <link rel="preload">) — the current page is more important than the next.

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

¥The fetch request for a prefetch operation results in an HTTP request that includes the HTTP header Sec-Purpose: prefetch. A server might use this header to change the cache timeouts for the resources, or perform other special handling. The request will also include the Sec-Fetch-Dest header with the value set to empty.

请求中的 Accept 标头将与正常导航请求使用的值匹配。这允许浏览器在导航后找到匹配的缓存资源。

¥The Accept header in the request will match the value used for normal navigation requests. This allows the browser to find the matching cached resources following navigation.

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

¥Specifications

¥Browser compatibility