前端性能優化--緩存

Cache-Control

Cache-Control：緩存控制

1. max-age
2. s-maxage
3. private
4. public
5. no-cache
6. no-store

max-age

1. 設置緩存存儲的最大週期，超過這個時間緩存被認爲過時(單位秒)。與Expires相反，時間是相對於請求的時間，
2. 優先級高於Expires

s-maxage

1. 覆蓋max-age 或者 Expires 頭，可是僅適用於共享緩存(好比各個代理)，而且私有緩存中它被忽略
2. 只能用於public,如CDN
3. 優先級高於max-age

]

private

1. 代表響應只能被單個用戶緩存，不能做爲共享緩存（即代理服務器不能緩存它）,能夠緩存響應內容
2. 本身的服務器

public

1. 代表響應能夠被任何對象（包括：發送請求的客戶端，代理服務器，等等）緩存。
2. CDN,能夠被多個用戶請求

no-cache

1. 在釋放緩存副本以前，強制高速緩存將請求提交給原始服務器進行驗證
2. 這個文件無論怎麼樣,都會向服務器發起請求,去服務器哪邊詢問,這個文件有沒有在緩存策略裏

no-store

1. 緩存不該存儲有關客戶端請求或服務器響應的任何內容。
2. 不會使用任何緩存策略

Expires

1. 緩存過時時間,用來指定資源的到期時間,是服務器端的具體的時間點
2. 告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存取數據,而不用再次請求
3. max-age的優化級高於expires,當有max-age的時候,會無視expires
4. 當在有效時間內,若是服務器端的文件已經發生改變,可是瀏覽器端沒法感知

Last-Modified/If-Modified-Since

Last-Modified 是一個響應首部，其中包含源頭服務器認定的資源作出修改的日期及時間。 它一般被用做一個驗證器來判斷接收到的或者存儲的資源是否彼此一致。因爲精確度比 ETag 要低，因此這是一個備用機制。包含有 If-Modified-Since 或 If-Unmodified-Since 首部的條件請求會使用這個字段。

1. 基於客戶端和服務端協商的緩存機制
2. Last-Modified ----response header
3. If-Modified-Since----request header
4. 須要與cache-control共同使用
5. max-age的優先級高於Last-Modified

缺點:

1. 某些服務端不能獲取精確的修改時間
2. 文件修改時間改了,但文件內容卻沒有變

效果

1. 勾上disable cache
2. 第一次請求,狀態碼200,response header裏有返回Last-Modified
3. 不勾disable cache
4. 刷新,狀態碼304,request header裏有If-Modified-Since
5. 由於客戶端發送過來的的Modified與服務端的Modified同樣,因此使用緩存

Etag/If-None-Match

ETagHTTP響應頭是資源的特定版本的標識符。這可讓緩存更高效，並節省帶寬，由於若是內容沒有改變，Web服務器不須要發送完整的響應。而若是內容發生了變化，使用ETag有助於防止資源的同時更新相互覆蓋（「空中碰撞」）

1. 文件內容的hash值
2. etag--response header
3. if-none-match -- request header
4. 要與cache-control共同使用

效果

1. 清掉緩存
2. 第一次請求，服務器返回etag
3. 可使用緩存
4. 再次請求，客戶端向服務器發送if-none-match
5. 由於2個值同樣，因此返回304，讓瀏覽器讀取本地的資源

分級緩存策略

流程圖