文章中英模式

常見的前端面試題目 - 頁面載入 - Prefetch & Preload 解析

深入理解 Prefetch 與 Preload 技術的差異和應用場景，掌握前端資源優化關鍵技術，提升網站載入速度與使用者體驗。

文章中英模式

懶得看文章？那就來看影片吧

基本概念

Prefetch 和 Preload 是現代瀏覽器提供的資源載入優化技術，它們能幫助開發者控制資源載入的優先順序，大幅提升頁面載入速度和使用者體驗。

1. Preload（預載入）- 提前載入當前頁面必需的關鍵資源
2. Prefetch（預抓取）- 提前載入使用者可能需要的未來資源

這兩種技術雖然名稱相近，但用途和行為完全不同，正確使用對優化網站性能至關重要。

Preload vs Prefetch 資源載入流程:
┌─────────────────────────────────────────────────────┐
│                                                     │
│  Preload                      Prefetch              │
│  ┌───────────────┐           ┌───────────────┐     │
│  │ 關鍵資源       │           │ 未來可能需要的  │     │
│  │ (立即高優先級) │           │ 資源(低優先級)  │     │
│  └───────┬───────┘           └───────┬───────┘     │
│          │                           │             │
│          ▼                           ▼             │
│  ┌───────────────┐           ┌───────────────┐     │
│  │ 立即載入       │           │ 瀏覽器閒置時   │     │
│  │ 參與當前頁面   │           │ 才載入，存入   │     │
│  │ 渲染過程       │           │ 快取供將來使用 │     │
│  └───────────────┘           └───────────────┘     │
│                                                     │
└─────────────────────────────────────────────────────┘

特點:

1. 高優先級 - 優先載入最重要的資源
2. 參與關鍵渲染路徑 (CRP) - 直接影響當前頁面渲染
3. 不會阻塞頁面解析 - 平行下載，不影響 HTML 解析
4. 控制在 4~6 個資源 - 太多會導致性能問題

實現方式:

<!-- 預載入 CSS -->
<link rel="preload" href="critical-styles.css" as="style">

<!-- 預載入字體檔案 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 預載入 JavaScript -->
<link rel="preload" href="important-script.js" as="script">

<!-- 預載入 LCP 主要圖片 -->
<link rel="preload" href="hero-image.jpg" as="image">

使用情境:

1. 關鍵 CSS 和 JavaScript - 確保頁面骨架快速呈現
2. 主要圖片 (LCP 元素) - 縮短最大內容繪製時間
3. 自訂字體 - 避免字體閃爍，提前載入
4. 主要 API 資料 - 可用於預載入 JSON 資料

Preload - 當前頁面的關鍵資源

Preload 用於載入當前頁面必需的資源，這些資源會在頁面解析 HTML 的同時就立即開始下載，不會阻塞頁面的解析過程。

特點:

1. 高優先級 - 優先載入最重要的資源
2. 參與關鍵渲染路徑 (CRP) - 直接影響當前頁面渲染
3. 不會阻塞頁面解析 - 平行下載，不影響 HTML 解析
4. 控制在 4~6 個資源 - 太多會導致性能問題

實現方式:

<!-- 預載入 CSS -->
<link rel="preload" href="critical-styles.css" as="style">

<!-- 預載入字體檔案 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 預載入 JavaScript -->
<link rel="preload" href="important-script.js" as="script">

<!-- 預載入 LCP 主要圖片 -->
<link rel="preload" href="hero-image.jpg" as="image">

使用情境:

1. 關鍵 CSS 和 JavaScript - 確保頁面骨架快速呈現
2. 主要圖片 (LCP 元素) - 縮短最大內容繪製時間
3. 自訂字體 - 避免字體閃爍，提前載入
4. 主要 API 資料 - 可用於預載入 JSON 資料

Prefetch - 未來可能需要的資源

Prefetch 用於載入未來頁面可能需要的資源，瀏覽器會在閒置時間以低優先級下載這些資源，並放入快取，供將來使用。

特點:

1. 低優先級 - 僅在瀏覽器閒置時處理
2. 不參與當前頁面渲染 - 僅作快取用途
3. 用於未來需求 - 為用戶下一步操作做準備
4. 節省後續載入時間 - 從快取中讀取已經預抓取的資源

實現方式:

<!-- 預抓取下一頁資源 -->
<link rel="prefetch" href="/next-page.html">

<!-- 預抓取 JavaScript 模組 -->
<link rel="prefetch" href="non-critical-bundle.js">

<!-- 預抓取可能需要的圖片 -->
<link rel="prefetch" href="secondary-images.jpg">

使用情境:

1. 分頁導航 - 預抓取下一頁/上一頁內容
2. 搜尋結果 - 預抓取排名靠前的搜尋結果頁面
3. 非關鍵 JS bundle - 預抓取非立即需要的功能模組
4. 登入/註冊頁面 - 預抓取使用者可能即將訪問的頁面

效能影響與應用技巧

Preload 與 LCP (Largest Contentful Paint)

LCP 是 Core Web Vitals 中的重要指標，反映頁面上最大內容元素呈現的時間。正確使用 Preload 可以大幅改善 LCP 時間。

┌───────────────────────────────────────────────┐
│                                               │
│  未使用 Preload:                              │
│  解析 HTML ──> 發現 LCP 圖片 ──> 開始載入圖片  │
│                                               │
│  使用 Preload:                                │
│  解析 HTML ──┐                                │
│              ├──> 平行載入 LCP 圖片           │
│  繼續解析    ┘                                │
│                                               │
└───────────────────────────────────────────────┘

總結

Preload 和 Prefetch 是現代網頁開發中重要的資源載入優化技術，正確使用它們可以顯著提升網站的載入速度和使用者體驗。

1. Preload - 對當前頁面的關鍵資源進行高優先級載入
2. Prefetch - 對未來可能需要的資源進行低優先級載入

記住：

1. 控制 Preload 資源數量，避免過度使用
2. 使用 Prefetch 為用戶的下一步操作做準備
3. 結合效能監測，確保這些技術真正帶來效能提升

透過策略性地實施這些技術，開發者可以創造更快速、更流暢的網頁瀏覽體驗，提高用戶滿意度並改善轉化率。

🔥 常見面試題目

（一）Preload 和 Prefetch 的主要區別是什麼？

解答：Preload 和 Prefetch 有以下關鍵差異：

特性	Preload	Prefetch
用途	當前頁面必需的資源	未來頁面可能需要的資源
優先級	高	低（閒置時才載入）
時機	立即下載	瀏覽器閒置時
使用場景	當前頁面渲染需要	預期用戶下一步操作

代碼範例：

<!-- Preload 範例：當前頁面需要的字體 -->
<link rel="preload" href="fonts/important-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Prefetch 範例：用戶可能會點擊的下一頁資源 -->
<link rel="prefetch" href="/next-page-assets/main.js">

<!-- 在同一頁面可以同時使用兩種技術 -->
<head>
  <!-- 當前頁面的關鍵CSS -->
  <link rel="preload" href="critical.css" as="style">
  <!-- 用戶可能會訪問的下一頁 -->
  <link rel="prefetch" href="next-page.html">
</head>

（二）什麼情況下應該使用 Preload 而不是正常的資源載入方式？

解答：應在以下情況使用 Preload：

1. 重要資源在 CSS 中被引用，但被發現太晚（如自訂字體）
2. 關鍵資源在頁面 HTML 結構深處，被發現太晚
3. 需要提前載入 LCP 圖片以改善關鍵效能指標
4. 資源不是由 HTML 解析器直接發現的（如由 JavaScript 動態載入的關鍵資源）

總之，當資源對當前頁面很重要，但在正常載入順序中會被延後發現時，就應該考慮 Preload。

（三）使用 Preload 可能帶來的問題是什麼？如何避免？

解答：主要問題包括：

1. 過度使用 - 預載入太多資源會分散帶寬，反而拖慢關鍵資源載入
2. 未使用資源 - 如果預載入後 3 秒內未使用，Chrome 會在控制台顯示警告
3. 重複請求 - 若設置不當，同一資源可能被請求兩次

避免方法：

1. 嚴格控制 Preload 數量，通常不超過 4-6 個
2. 確保每個 Preload 資源都有正確的 as 屬性
3. 只 Preload 真正關鍵的資源，並確保它們會被立即使用
4. 監控頁面效能，確認 Preload 確實帶來效能提升

<!-- 範例: 預載入一個關鍵的字體 -->
<link rel="preload" href="/fonts/important-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">