前端緩存是提升網頁性能和用戶體驗的重要手段，但也常導致資源更新不及時等問題。以下是關于前端緩存的核心知識點和解決方案：

一、緩存類型及工作原理

1. HTTP緩存（最核心）

   • 強緩存：直接從本地讀取，不請求服務器
     • Expires：HTTP/1.0，絕對時間（如Expires: Wed, 21 Oct 2025 07:28:00 GMT）
     • Cache-Control：HTTP/1.1，相對時間（如max-age=31536000表示緩存1年）
   • 協商緩存：先請求服務器判斷是否需更新
     • Last-Modified/If-Modified-Since：基于文件修改時間
     • ETag/If-None-Match：基于文件內容哈希值（更精準）

2. 其他緩存機制

   • localStorage/sessionStorage：存儲鍵值對數據，需手動管理
   • Cookie：存儲少量數據，隨請求發送，有大小限制
   • Service Worker：可編程控制的緩存，支持離線功能

二、常見緩存問題及解決

1. 資源更新不及時

   • 方案1：文件指紋
     給靜態資源加哈希后綴（如app.8f3d7.js），內容變更則哈希變化，自動失效舊緩存
   • 方案2：合理設置Cache-Control

     # HTML文件（不緩存或協商緩存）
     Cache-Control: no-cache# 靜態資源（長期強緩存+指紋）
     Cache-Control: max-age=31536000, immutable
     

   • 方案3：版本號策略
     在URL加版本參數（如lib.js?v=2），更新時改變版本號

2. 緩存冗余導致的空間占用

   • 定期清理localStorage中不再使用的數據
   • 對Service Worker緩存設置容量限制和淘汰策略

3. 跨域資源緩存

   • 服務器需設置Access-Control-Allow-Origin頭
   • 對CDN資源確保正確配置緩存策略

三、緩存優化最佳實踐

1. 分層緩存策略

   • HTML：協商緩存（no-cache）
   • CSS/JS/圖片：強緩存+指紋（長期緩存）
   • API數據：結合業務設置合理的緩存時間

2. 緩存調試工具

   • Chrome DevTools的Network面板查看緩存狀態
   • 關注Size列：from memory cache（內存）、from disk cache（磁盤）

3. 版本發布策略

   • 靜態資源部署到CDN，使用指紋命名
   • HTML放在自己服務器，不設置強緩存
   • 大版本更新可考慮域名切換

合理利用緩存能顯著提升頁面加載速度，但需平衡緩存效率和內容新鮮度，根據資源類型制定差異化策略。