cache-control這個東西就是對服務端拉取的靜態資源打上一個緩存標志
對於cache-control可以設置幾種模式,通常前端工程師需要知道幾種模式
-
max-age = 10000 (以秒為單位,根據需求設定)
-
no-cache (每次進行請求時都要向服務端進行驗證,需要配合etag,Last-Modified使用)
-
no-store (每次請求都需要向服務端拉取新的資源)
-
private (私有的,不經過代理緩存)
-
public (公有的,如果本地失效,代理緩存存在的話可以從代理緩存進行通知用過期的資源)
max-age
當加載完資源時,瀏覽器會自動給我們存儲到內存當中,但是瀏覽的失效時間是由內部機制控制的,在用nginx做靜態資源的時候,在刷新的時候,瀏覽會向服務端再次發送是否過期的認證,在資源緩存時間確定的情況下,通過max-age指定強緩存后,瀏覽器再次加載同樣的資源文件時,只需要從memory或者disk上面進行拉取復用。
達到以上的功能需要在返回資源的服務端對返回的資源設置'cache-control': 'max-age=時間(以秒為單位)',當再次刷新頁面的時候,在設置的時間之內刷新頁面,不清除緩存的情況下都會重新拉取內存了中的緩存資源。
no-cache
no-cache 字面的字意是不緩存的意思,很容易迷惑人,但是本質的函意,意味着每次發送請求靜態資源時都需要向服務端進行一次過期認證,通常情況下,過期認真證需要配合(etag和Last-Modified)進行一個比較,這個話題后繼再展開討論,如果驗證並沒有過期,則會發送304的狀態碼,通知瀏覽進復用瀏覽器的緩存
no-store
no-store 代表每次資源請求都拉取資源服務器的最新資源,就算同時設置max-age , no-store, no-store的優先級則最高,此時max-age則不生效,同樣的會從服務端拉取最新的資源
private vs. public
在資源請求時,有些情況不會直接到原資源服務器發送請求,中間會經過一些代理服務器,比如說cdn,nginx等一些代理服務器,如果寫入public的情況下,所有的代理服務器同樣也會進行緩存,比如說s-maxage就是在代理緩存中生效的,如果本地max-age過期了,則會通過代理緩存,代理緩存並沒有過期,會告訴瀏覽器還是可以用本地過期的緩存,但對於private中間代理服務器則不會生效,直接從瀏覽器端向原服務器進行一個驗證。
緩存驗證 Last-Modified 和 Etag
Last-Modified
最后修改時間,一般在服務端,對文件的修改都會有一個修改時間的記錄,在nginx做靜態資源時,nginx會返回一個Last-Modified表示最后修改的時間.在瀏覽器再次請求的時候,會把對應的If-Modified-Since和If-UnModified-Since在請求頭中再次發送給服務端,告訴服務端上次你給我文件改動的時間,但是Last-Modified只能以秒為單位,在有些情況下,是不夠精確的
Etag
Etag 是一個更加嚴格的驗證,主要通過一些數據簽名,每個數據都有自己的唯一簽名,一旦數據修改,則會生成另一個唯一的簽名,最典型的做法就是對內容做一個hash計算,當瀏覽器端向服務端再請求的時會帶上 If-Match 或者 If-Non-Match, 當服務端接收到后之后會對比服務端的簽名和瀏覽器傳過來的簽名,這也彌補了Last-Modified只能以秒為單位,而不夠精確的情況。
Last-Modified 和 Etag 配合 no-cache 使用
通常只會在 cache-control: no-cache 的情況下使用,瀏覽器也會對資源進行一個緩存, 同時會對服務端進行一個過期認證,一旦服務端返回304狀態碼,則說明可以復用瀏覽器的緩存,則會向服務端重新請求數據。