跳至正文

理解快取(Cache) ⚡

網站快速載入的秘訣之一就是快取!讓我用簡單的方式解釋快取是什麼以及它如何運作,即使是初學者也能輕鬆理解!

用日常生活比喻快取?​

讓我們把快取比作桌上的便籤本?

便籤本的故事 📝​

沒有便籤本(沒有快取):

每次需要朋友的電話號碼時
1. 打開抽屜
2. 拿出電話簿
3. 查找號碼
4. 把電話簿放回去
→ 每次都很費時間 😓

使用便籤本(使用快取):

把常用的號碼記在桌上的便籤本上
1. 看便籤本
2. 馬上打電話!
→ 又快又方便 ⚡

快取也是一樣的!

把常用的資料
暫時儲存在近處
→ 快速存取!

快取的定義​

快取 (Cache)

  • 將常用資料暫時儲存在快速儲存裝置中
  • 提高速度是目的
  • 原件保持不變,只儲存副本

為什麼需要快取?​

速度比較​

從伺服器取得資料:
瀏覽器 → (網際網路) → 伺服器 → 資料 → (網際網路) → 瀏覽器
時間: 500ms (慢 🐌)

從快取取得資料:
瀏覽器 → 本機快取 → 資料
時間: 10ms (快 ⚡)

→ 快50倍!

快取的類型​

1. 瀏覽器快取 🌐​

儲存在Web瀏覽器中的快取

首次造訪:
瀏覽器 → 伺服器: "請給我index.html"
伺服器 → 瀏覽器: [檔案傳輸 + "可以快取"]
瀏覽器: 儲存檔案

下次造訪:
瀏覽器: "哦,在快取裡!" → 直接使用
→ 無需伺服器請求快速載入 ⚡

儲存的內容:

  • HTML檔案
  • CSS檔案
  • JavaScript檔案
  • 圖片(logo、圖示等)
  • 字型

2. CDN快取 🌍​

分散在全球伺服器上儲存

使用者(台灣) → CDN伺服器(台北) → 內容
                  ↓
            快速回應 ⚡

vs

使用者(台灣) → 原始伺服器(美國) → 內容
                  ↓
            慢速回應 🐌

3. 伺服器快取 💾​

在伺服器上快取資料

快取資料庫查詢結果
快取API回應
快取計算結果

4. 記憶體快取 (RAM) 🧠​

儲存在電腦記憶體中

速度順序:
記憶體快取 (最快) ⚡⚡⚡
磁碟快取 (快) ⚡⚡
網路 (慢) ⚡

快取運作過程​

1. 第一次請求 (快取未命中)​

1. 瀏覽器: "需要logo.png!"
2. 檢查快取: "沒有?"
3. 請求伺服器: "請給我logo.png"
4. 伺服器回應: [檔案 + 快取策略]
5. 使用檔案 + 儲存到快取

2. 第二次請求 (快取命中)​

1. 瀏覽器: "需要logo.png!"
2. 檢查快取: "有!" ✅
3. 直接從快取使用
→ 無需伺服器請求 ⚡

快取控制標頭​

伺服器告訴瀏覽器如何快取:

Cache-Control​

Cache-Control: max-age=3600
→ 快取使用3600秒(1小時)

Cache-Control: no-cache
→ 每次都向伺服器確認

Cache-Control: no-store
→ 不要快取

Cache-Control: public
→ 任何人都可以快取

Cache-Control: private
→ 只有使用者瀏覽器可以快取

Expires​

Expires: Wed, 21 Oct 2025 07:28:00 GMT
→ 快取有效期到這個日期

ETag​

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
→ 檔案唯一識別符
→ 檢查檔案是否已變更

快取驗證 (Validation)​

條件請求​

瀏覽器 → 伺服器: "我有檔案,改了嗎?"
           If-None-Match: "33a64df55..."

伺服器 → 瀏覽器: "沒改!"
           304 Not Modified

瀏覽器: "那就用快取!" ✅
如果檔案改了:
伺服器 → 瀏覽器: "改了!"
           200 OK + 新檔案

快取的優點​

✅ 快速載入速度​

首次造訪: 3秒
第二次造訪: 0.5秒 ⚡
→ 快6倍!

✅ 減少伺服器負載​

100萬人造訪
→ 透過快取90%不需要伺服器請求
→ 伺服器只處理10萬請求

✅ 降低成本​

減少網路流量
→ 降低伺服器成本 💰

✅ 離線使用​

快取的頁面
沒有網際網路也能看

快取的缺點​

❌ 過時的內容​

即使檔案更新了
還是使用快取的舊版本

❌ 佔用儲存空間​

快取堆積後
佔用磁碟空間

❌ 需要快取管理​

設定適當的過期時間
需要快取失效策略

快取問題解決​

問題1: 更新不顯示!​

解決方法:

  1. 強制重新整理 (Hard Refresh)
Windows: Ctrl + F5
Mac: Cmd + Shift + R
  1. 刪除快取
Chrome: 設定 → 清除瀏覽資料 → 快取
  1. 無痕模式
Ctrl + Shift + N (Chrome)
→ 不使用快取

問題2: 檔案名稱變更 (Cache Busting)​

開發者解決方案:

<!-- 不好的例子 -->
<link rel="stylesheet" href="style.css">

<!-- 好例子: 新增版本號 -->
<link rel="stylesheet" href="style.css?v=1.2.3">

<!-- 更好的例子: 檔案雜湊 -->
<link rel="stylesheet" href="style.abc123.css">

檔案改變時名稱也改變,重新下載!

快取策略​

1. 靜態資源 (不改變)​

logo、圖示、函式庫

Cache-Control: max-age=31536000, immutable
→ 快取1年 (保證不變更)

2. 經常更新的內容​

新聞文章、商品清單

Cache-Control: max-age=300
→ 只快取5分鐘

3. 個人資訊​

使用者設定、帳號資訊

Cache-Control: private, no-cache
→ 只有使用者瀏覽器,每次驗證

4. 絕對不快取​

付款頁面、敏感資訊

Cache-Control: no-store
→ 禁止快取

在瀏覽器中管理快取​

Chrome開發者工具​

F12 → Network標籤
→ 在"Size"欄檢查快取

(disk cache) = 從磁碟快取載入
(memory cache) = 從記憶體快取載入
顯示大小 = 從伺服器下載

刪除快取​

Chrome:

設定 → 隱私和安全性
→ 清除瀏覽資料
→ 勾選快取的圖片和檔案
→ 清除

實際使用範例​

範例1: 圖片快取​

首次造訪:
GET /logo.png
← 200 OK (1MB下載, 500ms)
Cache-Control: max-age=86400

下次造訪:
GET /logo.png
← (disk cache) (0KB, 10ms)
→ 快50倍! ⚡

範例2: CSS檔案​

<link rel="stylesheet" href="styles.abc123.css">

Cache-Control: max-age=31536000, immutable
→ 快取1年,檔案名稱包含雜湊
→ 檔案變更時名稱也變更

範例3: API回應快取​

// 伺服器回應
Cache-Control: max-age=60

// 1分鐘內呼叫相同API
→ 使用快取的回應
→ 減少伺服器負載

常見問題 (FAQ)​

Q1: 快取和Cookie的區別?​

A:

  • 快取: 檔案儲存 (快速載入)
  • Cookie: 小資料儲存 (狀態保持)

Q2: 需要經常刪除快取嗎?​

A: 通常不需要!

  • 瀏覽器自動管理
  • 空間不足時自動刪除舊的
  • 只有出問題時手動刪除

Q3: 無痕模式下的快取?​

A: 只使用暫時快取

  • 關閉視窗時全部刪除
  • 不使用現有快取

Q4: 快取容量有多大?​

A: 因瀏覽器而異:

  • Chrome: 每個網站~50MB
  • 總快取: ~數GB

Q5: 行動裝置也使用快取嗎?​

A: 是的! 運作方式相同。

  • 節省資料
  • 快速載入

快取失效 (Cache Invalidation)​

電腦科學中最難的問題之一:

"什麼時候應該刪除快取?"

策略​

  1. 基於時間
每10分鐘自動過期
  1. 基於事件
資料更新時刪除快取
  1. 版本管理
檔案名稱中包含版本/雜湊

下一步 🚀​

如果你理解了快取:

  1. ✅ Cookie是什麼? - 另一種瀏覽器儲存方法
  2. ✅ 理解HTTP請求/回應 - 快取標頭如何運作
  3. ✅ VPN是什麼? - 網際網路安全

總結​

快取是讓Web變快的魔法! ⚡

要記住的要點:

  • 快取 = 暫時儲存
  • 目的: 提高速度
  • 儲存常用資料
  • 自動管理所以不用擔心
  • 只有出問題時才刪除

多虧了快取,網站載入很快。下次上網時,試著感受快取在運作! 🚀