昨天公司運維來找測試，希望他們注意響應中的緩存字段。我在旁邊聽着，覺得他們講得很有問題，就插了兩句，和他們說了下公司目前官網圖片緩存策略的問題。然后就讓我寫個小文檔發出來，好吧，誰叫我多嘴。這篇文章就是自己整理的一個小文檔，詳細的描述了http緩存及其優先級。
HTTP緩存
主要有兩種緩存：強緩存和對比緩存（也叫協商緩存）。
強緩存：只要請求了一次，在有效時間內，不會再請求服務器（請求都不會發起），直接從瀏覽器本地緩存中獲取資源。主要字段有（expires：date（過期日期）、cache-control： max-age=time（毫秒數，多久之后過期） |no-cache|no-store）。如果expires和cache-control同時存在，cache-control會覆蓋expires。建議兩個都寫，cache-control是http1.1的頭字段，expires是http1.0的頭字段，都寫兼容會好點。
對比緩存：無論是否變化，是否過期都會發起請求，如果內容沒過期，直接返回304，從瀏覽器緩存中拉取文件，否則直接返回更新后的內容。主要字 段有：
1、服務器端返回字段 Etag： xxxx (一般為md5值) 對應客戶端匹 配字段為， If-None-Match: w/xxx(xxx的值和上面的etag的xxx一樣則返 回304，否則返回修改后的資源)。
2、服務器端返回字段：Last-Modifieddate(日期),對應客戶端匹配字段If-Modified-Since:date（如果服務器date小於等於客戶端請求date則返回304，否則返回修改后的資源））。
同時存在各種緩存頭時，各緩存頭優先級及生效情況:
1、強緩存和對比緩存同時存在，如果強緩存還在生效期則強制緩存覆蓋對比緩存，對比緩存不生效；如果強緩存不在有效期，對比緩存生效。即：強緩存優先級 > 對比緩存優先級
2、強緩存expires和cache-control同時存在時，則cache-control會覆蓋expires，expires無論有沒有過期，都無效。 即：cache-control優先級 > expires優先級。
3、對比緩存Etag和Last-Modified同時存在時，則Etag會覆蓋Last-Modified，Last-Modified不會生效。即：ETag優先級 > Last-Modified優先級。
當然還有一種緩存pragma，和cache-control類似，前者是http1.0內容后者是http1.1內容，並且pragma優先級 > cache-control優先級，不過前者目前基本不使用。
針對我們當前的項目，由於css和js在打包時加了md5值，建議直接使用強緩存，並且expires和cache-control同時使用，建議設置時長為7天較為妥當。圖片文件由於沒有加md5值，建議采用對比緩存，html文件也建議采用對比緩存。
ps: 當我們不設置cache-control，只設置對比緩存，在不同瀏覽器下會有不同的表現。chrome會直接從本地緩存獲取，其他會請求服務器返回304.這時候有兩種方式讓他們的響應一致。1、設置cache-control: public, max-age=0;記住，這里的public是關鍵。因為默認值是private，表示其他代理都不要緩存，只有服務器緩存，而max-age又為0，所以每次都會發起200的請求。設置public的意思就是允許其他各級代理緩存資源，因此如果資源沒改變會返回304。 2、直接設置max-age=1000。即是一秒之后內容過期，目的是觸發瀏覽器緩存。也能達到想要304的效果。
作者：maoruibin
鏈接：https://www.imooc.com/article/details/id/22841
來源：慕課網