瀏覽器快取機制

引言：

前端開發中，快取有利於加快網頁的載入速度，同時快取能夠被反覆利用，所以可以減少流量和頻寬的開銷。

快取的分類有很多種，分為：cdn快取、資料庫快取、**伺服器快取、瀏覽器快取

本文主要介紹瀏覽器快取：瀏覽器的快取問題，主要指的是http的快取，即協議層；協議層的快取，其實，可以被分成強制快取和對比快取。

1、強制快取

只有當快取失效時，才會去伺服器獲取最新資源的方式，就是強制快取；

在協議層的字段中，可以造成強制快取的字段有兩個:expires、cache-control

1.1、expires

該欄位表示快取到期時間，即有效時間+當時伺服器的時間，然後將這個時間設定在header中返回給伺服器。因此，該時間是乙個絕對時間，舉例說明：

expires: thu, 10 nov 2017 08:45:11 gmt

在響應訊息頭中，設定這個字段之後，就可以告訴瀏覽器，在未過期之前不需要再次請求。

但是，這個字段設定時有缺點：

由於是絕對時間，使用者可能會將客戶端本地的時間進行修改，而導致瀏覽器判斷快取失效，重新請求該資源，同時，還導致客戶端與服務端的時間不一致，致使快取失效。

1.2、cache-control

在http/1.1中，增加了乙個欄位cache-control，該欄位表示資源快取的最大有效時間，在該時間內，客戶端不需要向伺服器傳送請求

這兩者的區別就是前者是絕對時間，而後者是相對時間。我們不妨舉個例子來說明一下：

cache-control: max-age=2592000

①、max-age：即最大有效時間，在上面的例子中我們可以看到

②、no-cache：表示沒有快取，即告訴瀏覽器該資源並沒有設定快取

③、s-maxage：同max-age，但是僅用於共享快取，如cdn快取

④、public：多使用者共享快取，預設設定

⑤、private：不能夠多使用者共享，http認證之後，欄位會自動轉換成private。

2、對比快取

對比快取的過程是，先從快取中獲取對應的資料標識，然後向伺服器傳送請求，確認資料是否更新，如果更新，則返回新資料和新快取；反之，則返回304狀態碼，告知客戶端快取未更新，可繼續使用。

這正好彌補了一些強制快取的缺陷。對比快取主要應用於一些時常需要動態更新的資源檔案。

對比快取在協議裡的字段是last-modified和if-modified-since。

2.1、last-modified

last-modified：伺服器告知客戶端，資源最後一次被修改的時間，例如

last-modified: thu, 10 nov 2015 08:45:11 gmt

2.2、if-modified-since

if-modified-since：再次請求時，請求頭中帶有該欄位，伺服器會將if-modified-since的值與last-modified欄位進行對比，如果相等，則表示未修改，響應304；

反之，則表示修改了，響應200狀態碼，返回資料；

這個字段可以和cache-control配合使用

3、瀏覽器行為引起的不同

①、重新整理網頁 => 如果快取沒有失效，瀏覽器會直接使用快取；反之，則向伺服器請求資料

②、手動重新整理（f5） => 瀏覽器會認為快取失效，在請求伺服器時加上cache-control: max-age=0欄位，然後詢問伺服器資料是否更新。

③、強制重新整理（ctrl + f5） => 瀏覽器會直接忽略快取，在請求伺服器時加上cache-control: no-cache欄位，然後重新向伺服器拉取檔案。

4、移動端的快取處理

一次完美的快取必須保證兩點：

①、資料快取之後，儘量減少伺服器的請求

②、如果資源更新的話，必須使得客戶端的資源一起更新。

所以，一般我們會運用的方式是：

在資源檔案後面加上表示，如config.f1ec3.js、config.v1.js之類的，然後給資源設定較長的快取時間，如一年；

cache-control: max-age=31536000

這樣子，就不會造成304的回包現象。

然後一旦資源發生更新時，我們可以改變資源後面的識別符號，實現靜態資源非覆蓋式更新。

瀏覽器快取機制

最近在準備優化日誌請求時遇到了一些令人疑惑的問題，比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求，為什麼多次訪問時有時請求裡帶了 etag，有時又沒有帶？等等。後來查了一些資料以及同事親自驗證，總算對這些問題有了個清晰的理解，現在整理出來以...

瀏覽器快取機制

當我們瀏覽乙個頁面發現有異常時，通常考慮的就是書不是瀏覽器做了快取呢，按ctrl f5重新請求一次就能請求到沒有快取的頁面，這個是為什麼呢。首先，ctrl f5組合鍵重新整理頁面，那麼瀏覽器會直接向目標url傳送請求，而不再使用瀏覽器快取的資料。其次，當請求到達伺服器端依然有可能出現使用伺服器端的資...

瀏覽器快取機制

瀏覽器快取機制 瀏覽器快取機制，其實主要就是 協議定義的快取機制 如 expires cache control 等 但是也有非 協議定義的快取機制，如使用 html meta 標籤，web 開發者可以在 html 頁面的節點中加入 標籤，如下 上述 的作用是告訴瀏覽器當前頁面不被快取，每次訪問都需...