瀏覽器第一次向乙個web伺服器發起http
請求後,伺服器會返回請求的資源,並且在響應頭中新增一些有關快取的字段如:cache-control
、expires
、last-modified
、etag
、date
等等。之後瀏覽器再向該伺服器請求該資源就可以視情況使用強快取和協商快取。
如圖紅線所示的過程代表強快取。使用者發起了乙個http
請求後,瀏覽器發現先本地已有所請求資源的快取,便開始檢查快取是否過期。有兩個http頭部字段控制快取的有效期:expires
和cache-control
,瀏覽器是根據以下兩步來判定快取是否過期的:
檢視快取是否有cache-control
的s-maxage
或max-age
指令,若有,則使用響應報文生成時間date + s-maxage/max-age
獲得過期時間,再與當前時間進行對比(s-maxage
適用於多使用者使用的公共快取伺服器);
如果沒有cache-control
的s-maxage
或max-age
指令,則比較expires
中的過期時間與當前時間。expires
是乙個絕對時間。
注意,在http/1.1中,當首部字段cache-control
有指定s-maxage
或max-age
指令,比起首部字段expires
,會優先處理s-maxage
或max-age
。
另外下面列幾個cache-control
的常用指令:
經過上述兩步判斷後,若快取未過期,返回狀態碼為200
,則直接從本地讀取快取,這就完成了整個強快取過程;如果快取過期,則進入協商快取或伺服器返回新資源過程。
當瀏覽器發現快取過期後,快取並不一定不能使用了,因為伺服器端的資源可能仍然沒有改變,所以需要與伺服器協商,讓伺服器判斷本地快取是否還能使用。此時瀏覽器會判斷快取中是否有etag
或last-modified
字段,如果沒有,則發起乙個http請求,伺服器根據請求返回資源;如果有這兩個字段,則在請求頭中新增if-none-match
字段(有etag
字段的話新增)、if-modified-since
字段(有last-modified
字段的話新增)。注意:如果同時傳送if-none-match
、if-modified-since
字段,伺服器只要比較if-none-match
和etag
的內容是否一致即可;如果內容一致,伺服器認為快取仍然可用,則返回狀態碼304
,瀏覽器直接讀取本地快取,這就完成了協商快取的過程,也就是圖中的藍線;如果內容不一致,則視情況返回其他狀態碼,並返回所請求資源。下面詳細解釋下這個過程:
1.etag
和if-none-match
二者的值都是伺服器為每份資源分配的唯一標識字串。
2.last-modified
和if-modified-since
二者的值都是gmt格式的時間字串。
3.etag
較之last-modified
的優勢
以下內容引用於:http協商快取vs強快取
你可能會覺得使用last-modified
已經足以讓瀏覽器知道本地的快取副本是否足夠新,為什麼還需要etag
呢?http1.1
中etag
的出現主要是為了解決幾個last-modified
比較難解決的問題:
這時,利用etag
能夠更加準確的控制快取,因為etag
是伺服器自動生成的資源在伺服器端的唯一識別符號,資源每次變動,都會生成新的etag
值。last-modified
與etag
是可以一起使用的,但伺服器會優先驗證etag
。
最後附一張圖說明使用者行為對瀏覽器快取的影響:
談談我理解的Http快取機制
前幾天看到老鐵們分享的面經,談到 http 快取機制的問題,痛下決心,一口氣研究個明白,分享給大家。前端的發展越來越迅速,能做的事情越來越多,承擔的責任越來越重,通過了解 http 快取機制,可以幫助廣大前端開發工作者提高 的訪問效率,也能有效減輕伺服器的壓力。http 快取規則 http快取機制有...
HTTP快取機制與原理解析
http報文分為兩個部分 body 用來存放http傳輸的真正資料 http快取涉及到三個主主體 客戶端瀏覽器,快取資料庫和服務端。而http快取又分為兩種 其基本思想就是 當資料不存在於快取資料庫時,此時會直接去請求伺服器,並把得到的結果寫入快取資料庫中 若資料存在快取資料庫且未過時,則直接去快取...
http學習 http的快取控制
由於請求 應答模式的通訊成本比較高,所以有必要將某些資料進行快取,從而節省頻寬。快取是優化系統效能的重要手段,http 傳輸的每乙個環節中都可以有快取 2.1 快取控制的流程 瀏覽器發現快取無資料,於是傳送請求,向伺服器獲取資源 伺服器響應請求,返回資源,同時標記資源的有效期 瀏覽器快取資源,等待下...