rel=prefetch
對於 rel 屬性的 <link> 元素，prefetch 關鍵字為瀏覽器提供了一個提示，表明使用者可能需要在將來的導航中使用目標資源，因此瀏覽器可以透過搶先獲取和快取資源來改善使用者體驗。<link rel="prefetch"> 用於同站點導航資源，或同站點頁面使用的子資源。
結果會被儲存在磁碟上的 HTTP 快取中。因此，即使子資源沒有被當前頁面使用，預取它們也很有用。你也可以用它來預取使用者可能在站點上訪問的下一個文件。但是，因此你需要小心處理頭部——例如，某些 Cache-Control 頭部可能會阻止預取（例如 no-cache 或 no-store）。
注意：由於存在此類限制，建議您在支援的情況下使用 Speculation Rules API 來進行文件預取。
<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" />
導航和子資源預取
預取可以用來獲取 HTML 和可能的下一次導航的子資源。一個常見的用例是在一個簡單的網站登陸頁面上獲取網站其餘部分使用的更多“重量級”資源。
<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="/landing-page" />
快取分割槽的的影響
許多瀏覽器現在都實現了某種形式的 快取分割槽，這使得 <link rel="prefetch"> 對旨在供不同頂級站點使用的資源變得無用。這包括跨站點導航時的主文件。因此，例如，以下預取
<link rel="prefetch" href="https://news.example/article" />
將無法從 https://aggregator.example/ 訪問。
規範
| 規範 |
|---|
| HTML 標準 # link-type-prefetch |
瀏覽器相容性
BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。
另請參閱
- 推測性載入，以比較
<link rel="prefetch">和其他類似的效能改進功能。