HTTP----HTTP緩存機制

看到一篇對http緩存介紹很詳細得文章，轉載記錄一下，原文連接: juejin.im/post/5a1d4e…

前言

緩存機制無處不在，有客戶端緩存，服務端緩存，代理服務器緩存等。在HTTP中具備緩存功能的是瀏覽器緩存。

HTTP緩存做爲web性能優化的重要手段，對於從事web開發的朋友有重要的意義。本文將圍繞如下幾個方面來整理HTTP緩存：

1. 緩存的規則
2. 緩存的方案
3. 緩存的優勢
4. 不一樣刷新的請求執行過程

緩存的規則

咱們知道HTTP的緩存屬於客戶端緩存，後面會提到爲何屬於客戶端緩存。因此咱們認爲瀏覽器存在一個緩存數據庫，用於儲存一些不常常變化的靜態文件（圖片、css、js等）。咱們將緩存分爲強制緩存和協商緩存。下面我將分別詳細的介紹這兩種緩存的緩存規則。

強制緩存

當緩存數據庫中已有所請求的數據時。客戶端直接從緩存數據庫中獲取數據。當緩存數據庫中沒有所請求的數據時，客戶端的纔會從服務端獲取數據。

協商緩存

又稱對比緩存，客戶端會先從緩存數據庫中獲取到一個緩存數據的標識，獲得標識後請求服務端驗證是否失效（新鮮），若是沒有失效服務端會返回304，此時客戶端直接從緩存中獲取所請求的數據，若是標識失效，服務端會返回更新後的數據。

小貼士：

兩類緩存機制能夠同時存在，強制緩存的優先級高於協商緩存，當執行強制緩存時，如若緩存命中，則直接使用緩存數據庫數據，不在進行緩存協商。

緩存的方案

上面的內容讓咱們大概瞭解了緩存機制是怎樣運行的，可是，服務器是如何判斷緩存是否失效呢？咱們知道瀏覽器和服務器進行交互的時候會發送一些請求數據和響應數據，咱們稱之爲HTTP報文。報文中包含首部header和主體部分body。與緩存相關的規則信息就包含在header中。boby中的內容是HTTP請求真正要傳輸的部分。舉個HTTP報文header部分的例子以下：

接下來咱們將對HTTP報文中出現的與緩存規則相關的信息作出詳細解釋。（咱們依舊分爲強制緩存和協商緩存兩個方面來介紹）

強制緩存

對於強制緩存，服務器響應的header中會用兩個字段來代表——Expires和Cache-Control。

Expires
Exprires的值爲服務端返回的數據到期時間。當再次請求時的請求時間小於返回的此時間，則直接使用緩存數據。但因爲服務端時間和客戶端時間可能有偏差，這也將致使緩存命中的偏差，另外一方面，Expires是HTTP1.0的產物，故如今大多數使用Cache-Control替代。

Cache-Control
Cache-Control有不少屬性，不一樣的屬性表明的意義也不一樣。
private：客戶端能夠緩存
public：客戶端和代理服務器均可以緩存
max-age=t：緩存內容將在t秒後失效
no-cache：須要使用協商緩存來驗證緩存數據
no-store：全部內容都不會緩存。

協商緩存

協商緩存須要進行對比判斷是否可使用緩存。瀏覽器第一次請求數據時，服務器會將緩存標識與數據一塊兒響應給客戶端，客戶端將它們備份至緩存中。再次請求時，客戶端會將緩存中的標識發送給服務器，服務器根據此標識判斷。若未失效，返回304狀態碼，瀏覽器拿到此狀態碼就能夠直接使用緩存數據了。 對於協商緩存來講，緩存標識咱們須要着重理解一下，下面咱們將着重介紹它的兩種緩存方案。

Last-Modified

Last-Modified：
服務器在響應請求時，會告訴瀏覽器資源的最後修改時間。
if-Modified-Since:
瀏覽器再次請求服務器的時候，請求頭會包含此字段，後面跟着在緩存中得到的最後修改時間。服務端收到此請求頭髮現有if-Modified-Since，則與被請求資源的最後修改時間進行對比，若是一致則返回304和響應報文頭，瀏覽器只須要從緩存中獲取信息便可。 從字面上看，就是說：從某個時間節點算起，是否文件被修改了

若是真的被修改：那麼開始傳輸響應一個總體，服務器返回：200 OK 若是沒有被修改：那麼只需傳輸響應header，服務器返回：304 Not Modified

if-Unmodified-Since:
從字面上看, 就是說: 從某個時間點算起, 是否文件沒有被修改

若是沒有被修改:則開始`繼續'傳送文件: 服務器返回: 200 OK
若是文件被修改:則不傳輸,服務器返回: 412 Precondition failed (預處理錯誤)

這兩個的區別是一個是修改了才下載一個是沒修改才下載。
Last-Modified 說好卻也不是特別好，由於若是在服務器上，一個資源被修改了，但其實際內容根本沒發生改變，會由於Last-Modified時間匹配不上而返回了整個實體給客戶端（即便客戶端緩存裏有個如出一轍的資源）。爲了解決這個問題，HTTP1.1推出了Etag。

Etag：
服務器響應請求時，經過此字段告訴瀏覽器當前資源在服務器生成的惟一標識（生成規則由服務器決定）
If-None-Match：
再次請求服務器時，瀏覽器的請求報文頭部會包含此字段，後面的值爲在緩存中獲取的標識。服務器接收到次報文後發現If-None-Match則與被請求資源的惟一標識進行對比。

不一樣，說明資源被改動過，則響應整個資源內容，返回狀態碼200。
相同，說明資源無意修改，則響應header，瀏覽器直接從緩存中獲取數據信息。返回狀態碼304.

可是實際應用中因爲Etag的計算是使用算法來得出的，而算法會佔用服務端計算的資源，全部服務端的資源都是寶貴的，因此就不多使用Etag了。

緩存的優勢

減小了冗餘的數據傳遞，節省寬帶流量
減小了服務器的負擔，大大提升了網站性能
加快了客戶端加載網頁的速度
這也正是HTTP緩存屬於客戶端緩存的緣由 。

不一樣刷新的請求執行過程

瀏覽器地址欄中寫入URL，回車

瀏覽器發現緩存中有這個文件了，不用繼續請求了，直接去緩存拿。（最快）

F5

F5就是告訴瀏覽器，別偷懶，好歹去服務器看看這個文件是否有過時了。因而瀏覽器就膽膽襟襟的發送一個請求帶上If-Modify-since。

Ctrl+F5

告訴瀏覽器，你先把你緩存中的這個文件給我刪了，而後再去服務器請求個完整的資源文件下來。因而客戶端就完成了強行更新的操做.