在前端性能優化領域，資源加載策略直接影響頁面的加載速度和用戶體驗。<link>標簽的preload和prefetch屬性是瀏覽器提供的兩種關鍵資源預加載機制，它們都能提前加載資源，但適用場景和行為邏輯卻大不相同。本文將從定義、觸發時機、優先級等維度全面對比兩者的差異，并總結實際開發中的應用技巧。

一、核心定義：預加載的兩種不同策略

preload：當前頁面的“緊急需求”

preload用于提前加載當前頁面即將用到的關鍵資源（如核心CSS、字體、關鍵JavaScript），確保這些資源在需要時能立即可用，避免阻塞頁面渲染。

<!-- 預加載當前頁面需要的關鍵CSS -->
<link rel="preload" href="main.css" as="style">
<!-- 預加載當前頁面需要的字體文件 -->
<link rel="preload" href="iconfont.woff2" as="font" type="font/woff2" crossorigin>

核心特點：

• 屬于“當前頁面優先級”的預加載，瀏覽器會立即安排加載。
• 必須指定as屬性聲明資源類型（如style、script、font），否則瀏覽器無法確定資源優先級和用途。
• 若資源加載后未被使用，瀏覽器會在控制臺警告“資源預加載但未使用”。

prefetch：未來頁面的“提前準備”

prefetch用于提前加載用戶可能在未來頁面（如跳轉的下一頁）用到的資源，利用當前頁面的空閑時間加載，不影響當前頁面的加載性能。

<!-- 預加載用戶可能訪問的下一頁所需的JS -->
<link rel="prefetch" href="next-page.js">
<!-- 預加載可能用到的圖片資源 -->
<link rel="prefetch" href="product-image.jpg">

核心特點：

• 屬于“低優先級”預加載，瀏覽器會在當前頁面加載完成、網絡空閑時才開始加載。
• 無需指定as屬性（瀏覽器可自動推斷），但指定后能提升加載效率。
• 資源加載后會被緩存，當用戶訪問包含該資源的頁面時，可直接從緩存讀取。

二、關鍵差異對比表

維度	preload	prefetch
加載時機	頁面加載初期，立即觸發	頁面空閑時（Idle狀態），延遲觸發
優先級	高（與頁面關鍵資源同級）	低（低于當前頁面的大部分資源）
目標資源	當前頁面必須用到的關鍵資源	未來頁面（可能訪問）可能用到的資源
資源類型聲明	必須通過as指定（如as="style"）	可選，推薦指定以優化加載
未使用后果	瀏覽器控制臺警告，浪費帶寬	無警告，即使未使用也屬正常（預測性加載）
緩存策略	短期緩存（通常會話內有效）	長期緩存（遵循HTTP緩存策略）
典型使用場景	核心CSS、首屏JS、字體文件	下一頁JS、可能點擊的圖片、懶加載資源

三、技術細節：瀏覽器如何處理preload和prefetch

1. 加載優先級與瀏覽器調度

瀏覽器對資源的加載有嚴格的優先級排序（從高到低：Critical > High > Medium > Low），preload和prefetch的優先級差異直接影響加載順序：

• preload：根據as屬性指定的類型分配優先級。例如：

  • as="style"或as="script"通常被標記為“High”優先級，與頁面內嵌的CSS/JS同級。
  • as="font"因涉及文本渲染，優先級也較高（但受crossorigin屬性影響）。

• prefetch：無論資源類型，均被標記為“Low”優先級，瀏覽器會在當前頁面的關鍵資源（如HTML、CSS、首屏JS）加載完成后，利用空閑帶寬加載。

示例：當頁面同時包含preload的main.css和prefetch的next.js時，瀏覽器會先加載main.css（High優先級），待頁面加載完成后再加載next.js（Low優先級）。

2. 緩存行為差異

兩者的緩存機制不同，直接影響資源的復用效率：

• preload：加載的資源被放入“內存緩存”（memory cache），僅在當前頁面會話內有效，刷新頁面后可能需要重新加載（除非同時設置了HTTP緩存頭）。

• prefetch：加載的資源被放入“磁盤緩存”（disk cache），遵循HTTP緩存策略（如Cache-Control、Expires），即使關閉頁面再重新打開，只要緩存未失效，可直接復用。

注意：若preload的資源同時設置了強緩存頭（如Cache-Control: max-age=31536000），也會被持久化到磁盤緩存，與prefetch一致。

3. 資源使用的“綁定”機制

preload要求資源必須被當前頁面使用，否則會被視為“加載浪費”，這是因為preload的設計目標是“確保關鍵資源可用”，而非“預測性加載”：

• 當preload的資源通過<link rel="stylesheet">、<script>或代碼動態引用（如import()）時，瀏覽器會將預加載的資源“綁定”到使用處，避免重復加載。

• 若未被使用，瀏覽器會在控制臺拋出警告（如“The resource was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is used soon.”）。

prefetch則無此限制，因為其本質是“預測用戶行為的提前加載”，即使未被使用也屬于正常情況（例如用戶未點擊下一頁）。

四、最佳實踐：何時使用preload，何時使用prefetch？

1. preload的最佳場景

• 首屏關鍵CSS：避免CSSOM構建延遲導致的渲染阻塞。

  <link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
  

  （通過onload將preload轉換為stylesheet，確保樣式生效）

• 字體文件：字體加載延遲可能導致文本閃爍（FOIT/FOUT），preload可提前加載：

  <link rel="preload" href="inter-regular.woff2" as="font" type="font/woff2" crossorigin>
  

  （字體屬于跨域資源，必須添加crossorigin屬性，否則可能重復加載）

• 動態導入的關鍵JS：若頁面通過import()動態加載核心功能JS，可提前preload：

  <link rel="preload" href="app-core.js" as="script">
  <script>// 動態導入時會復用preload的資源import('./app-core.js').then(module => module.init());
  </script>
  

2. prefetch的最佳場景

• 下一頁的核心資源：根據用戶行為預測（如首頁預加載詳情頁JS）：

  <!-- 首頁預加載商品詳情頁的JS -->
  <link rel="prefetch" href="product-detail.js" as="script">
  

• 用戶可能觸發的資源：如點擊按鈕后彈出的彈窗所需的CSS/JS：

  <!-- 預加載可能彈出的彈窗樣式 -->
  <link rel="prefetch" href="modal.css" as="style">
  

• 懶加載資源的提前準備：對于滾動時可能加載的圖片或組件，可用prefetch在空閑時加載：

  <!-- 預加載懶加載區域的圖片 -->
  <link rel="prefetch" href="lazy-image.jpg" as="image">
  

3. 避免這些錯誤用法

• 不要用preload加載非關鍵資源：如低優先級的圖片或次要JS，會占用帶寬影響關鍵資源加載。
• 不要用prefetch加載當前頁面資源：其低優先級可能導致資源加載延遲，影響當前頁面渲染。
• 避免過度prefetch：預加載過多未使用的資源會浪費用戶帶寬（尤其移動網絡），建議結合用戶行為數據動態添加。
• 不要忽略as屬性：preload缺少as會導致瀏覽器將資源視為“fetch”類型，優先級降低且可能重復加載。

五、工具與檢測：驗證預加載效果

1. 瀏覽器開發者工具

• Network面板：查看資源的“Initiator”列，preload或prefetch的資源會標記為“Link”。
• Performance面板：記錄頁面加載過程，檢查preload資源是否在關鍵路徑上，prefetch資源是否在空閑時加載。

2. Lighthouse審計

Lighthouse會檢測preload的資源是否被有效使用，以及是否有必要的prefetch建議，幫助優化預加載策略。

六、總結：合理使用預加載提升性能

preload和prefetch都是提升頁面性能的有力工具，但核心差異在于加載時機和目標資源：

• preload是“當前頁面的緊急任務”，用于確保關鍵資源立即可用，解決“阻塞渲染”問題。
• prefetch是“未來頁面的提前準備”，用于利用空閑時間加載可能用到的資源，提升后續頁面的加載速度。

實際開發中，應根據資源的“必要性”和“使用時機”選擇合適的預加載方式：關鍵資源用preload確保首屏體驗，未來可能用到的資源用prefetch提升后續交互體驗。同時，需避免過度預加載導致的帶寬浪費，結合性能監控工具持續優化，才能真正發揮兩者的價值。