瀏覽器緩存機制

時間 2019-12-13

原文原文鏈接

簡介

瀏覽器緩存機制，其實主要就是http協議定義的緩存機制（如:Expires,Cache-control等).但也有非http協議定義的緩存機制，如使用HTML Meta標籤，web 開發者能夠在html頁面的<head>中加入<meta>標籤，代碼以下：css

<meta http-equiv='Pragma' content="no-cache">

上述代碼的做用就是告訴瀏覽器當前頁面不被緩存，每次訪問都須要去服務器拉取。使用上很簡單，但只有部分瀏覽器能夠支持，並且全部緩存代理服務都不支持,由於代理不解析html內容自己。html

能夠說這些內容能夠說基本沒有什麼卵用:)nginx

Expires策略

expires是web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存取數據，而無需再次請求。web

好比查看百度首頁瀏覽器

注：Date頭域表示消息發送的時間，時間的描述格式由rfc822定義。例如，Date: Mon,31 Dec 2017 04:25:57GMT緩存

web 服務器告訴瀏覽器在2017-08-26 03:31:29 GMT 這個時間點以前,可使用緩存文件，發送時間爲2017-08-08 06:41:32 GMT。服務器

不過Expires 是HTTP 1.0的東西，如今默認瀏覽器均默認使用HTTP 1.1，因此它的做用基本忽略。因此能夠重點看cache-controlui

`cache-control`

cache-control與expires的做用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數據仍是從新發請求到服務器取數據。只不過cache-control的選擇更多，設置更細緻，若是同時設置的話，其優先級高於Expires。spa

http協議頭中cache-control:代理

值能夠是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

   各個消息中的指令含義以下：
   
    1. public 指示響應可被任何緩存區緩存
    
    2. Private指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這容許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其餘用戶的請求無效。
    
    3.no-cache指示請求或響應消息不能緩存
    
    4.no-store用於防止重要的信息被無心的發佈。在請求消息中發送將使得請求和響應消息都不使用緩存。
    
    5.max-age指示客戶機能夠接收生存期不大於指定時間（以秒爲單位）的響應。
    
    6.min-fresh指示客戶機能夠接收響應時間小於當前時間加上指定時間的響應
    
    7.max-stale指示客戶機能夠接收超出超時期間的響應消息。若是指定max-stale消息的值，那麼客戶機能夠接收超出超時期指定值以內的響應消息。

`Last-Modified/If-Modified-Since`簡介

Last-Modified/If-Modified-Since要配合cache-Control使用。

Last-Modified：標示這個響應資源的最後修改時間。web服務器在響應請求時，告訴瀏覽器資源的最後修改時間。
If-Modified-Since：當資源過時時（使用Cache-Control標識的max-age），發現資源具備Last-Modified聲明，則再次向web服務器請求時帶上頭If-Modified-Since，表示請求時間。web服務器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應消息包體內），HTTP 200；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所保存的cache。

`Etag/If-None-Match`簡介

Etag/If-None-Match也要配合Cache-Control使用。

Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的惟一標識（生成規則由服務器生成)。
If-None-Match：當資源過時時（使用Cache-Control標識的max-age），發現資源具備Etage聲明，則再次向web服務器請求時帶上頭If-None-Match （Etag的值）。web服務器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回200或304。

既生`Last-Modified`何生`Etag`？

你可能會以爲使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新，爲何還須要Etag（實體標識）呢？HTTP1.1中Etag的出現主要是爲了解決幾個Last-Modified比較難解決的問題：

Last-Modified標註的最後修改只能精確到秒級，若是某些文件在1秒鐘之內，被修改屢次的話，它將不能準確標註文件的修改時間
若是某些文件會被按期生成，但有時內容並無任何變化，但Last-Modified卻改變了，致使文件無法使用緩存
有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形

Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的惟一標識符，可以更加準確的控制緩存。Last-Modified與ETag是能夠一塊兒使用的，服務器會優先驗證ETag，一致的狀況下，纔會繼續比對Last-Modified，最後才決定是否返回304。

用戶行爲與緩存

瀏覽器緩存行爲還有用戶的行爲有關！！！

用戶操做	`expires/cache-control`	`last-modified/etag`
地址欄回車	有效	有效
頁面連接跳轉	有效	有效
新開窗口	有效	有效
前進、後退	有效	有效
`F5`刷新	`無效`	有效
`ctrl+F5`刷新	`無效`	`無效`

總結

瀏覽器第一次訪問：

瀏覽器再次請求時：

廢話:`nginx`添加緩存

若是你想節省資源和帶寬，引入瀏覽器緩存不失爲一個好的方案。這裏，主要針對一些靜態文件。

location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
    access_log        off;
    log_not_found     off;
    expires           360d;
}

原文做者：吳秦

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

瀏覽器緩存機制

簡介

Expires策略

cache-control

Last-Modified/If-Modified-Since簡介

Etag/If-None-Match簡介

既生Last-Modified何生Etag？