瀏覽器快取-簡單介紹
兩個概念
-
強快取
使用者傳送的請求,直接從客戶端快取中獲取,不傳送請求到伺服器,不與伺服器發生互動行為。 -
協商快取
使用者傳送的請求,傳送到伺服器後,由伺服器返回hash值(Etag)、檔案最後修改時間(Last-modified)與客戶端的If-None-Match、If-Modified-Since進行對比從而判斷是否從快取中獲取資源。 -
兩者共同點:客戶端獲得的資料最後都是從客戶端快取中獲得。
-
兩者的區別:從名字就可以看出,強快取不與伺服器互動,而協商快取則需要與伺服器互動
強快取:
-
expires
Http1.0 中的標準,表明過期時間,注意此處的時間都是指的是伺服器的時間。 -
Cache-Control 簡單介紹下Cache-Control的屬性設定:
max-age: 設定快取的最大的有效時間,單位為秒(s)。max-age會覆蓋掉Expires
public:響應會被快取,並且在多使用者間共享。預設是public。
private: 響應只作為私有的快取,不能在使用者間共享。如果要求HTTP認證,響應會自動設定為private。
no-cache: 指定不快取響應,表明資源不進行快取。但是設定了no-cache之後並不代表瀏覽器不快取,而是在快取前要向伺服器確認資源是否被更改。因此有的時候只設置no-cache防止快取還是不夠保險,還可以加上private指令,將過期時間設為過去的時間。
no-store: 絕對禁止快取。
協商快取:
-
- Last-modified: 表明請求的資源上次的修改時間。(Last-modified與If-Modified-Since相同則使用快取)(Last-modified與If-Modified-Since相同證明檔案沒有被修改)
- If-Modified-Since:客戶端保留的資源上次的修改時間。
- Etag:資源的內容標識。(不唯一,通常為檔案的md5或者一段hash值,If-None-Match與Etag相同則使用快取)(If-None-Match與Etag相同證明檔案沒有被修改)
- If-None-Match: 客戶端保留的資源內容標識。
專案中常用的快取方式:
1. 如果有用到webpack等打包工具的,建議使用強快取(Cache-control方式,設定max-age時間可以長一些)+webpack打包使用hash檔名實現瀏覽器快取與快取更新。(這是目前最優的解決方案)
2. 如果專案中沒有用到webpack等打包工具的,建議使用協商快取來解決快取問題(協商快取較消耗效能,且google瀏覽器會出現無法獲取最新的Etag、Last-modified等情況。火狐瀏覽器正常。)。