親，你知道緩存是什么嗎?

其實緩存就像辦健身卡，我***次花了699辦了一年的卡之后，接下來的一年我都可以免費鍛煉。 在web 中， 我們交的不是錢，而是空間，我們耗費一定的空間之后，能夠獲得網(wǎng)頁打開速度質(zhì)的飛躍。 當我們***次訪問一個頁面時，我們需要交納一定的空間， 將下載的css,js,html已經(jīng)img等相關(guān)資源保存在本地。 在第二次，第三次。。。訪問時，就可以不用去下載文件了。 通常來說，設(shè)置文件的緩存有兩種方式，一種是在服務(wù)器內(nèi)設(shè)置響應(yīng)頭文件，另外一個是使用h5的manifest文件來進行相關(guān)設(shè)置. 我們先看看報文設(shè)置響應(yīng)頭的方式吧

服務(wù)器的緩存協(xié)商

這種方式設(shè)置的緩存有兩種，一種是需要服務(wù)器驗證，另外一種是不用發(fā)送請求驗證。

ETag/Last-Modified

這兩種方式做法類似，都要向服務(wù)器發(fā)送一次請求進行驗證。簡直，緩存就緩存唄，為什么還要驗證呢? 其實，這是該協(xié)議的一種特有方式，發(fā)送一次驗證主要是檢查文件是否發(fā)生變化。

ETag

ETag是用來計算文件的內(nèi)容是否發(fā)生變化，比如，你在文件中刪除一個空格，這樣都算文件內(nèi)容發(fā)生變化。 通常做法是用md5或者SHA1算法，計算出文件的唯一值。 在前端其實都可以完成， 找到一個文件文件解析的md5算法，然后將文件傳入，就可以得到ETag的值。 不過這里，我們著重點并不是讓你生成Etag，而是看看ETag在緩存中的重要作用。 ETag是HTTP/1.1A的一種辦法，由Web服務(wù)器生成，并寫入響應(yīng)頭中。

//response Headers 
ETag:"751F63A30AB5F98F855D1D90D217B356" 

接著，到了瀏覽器之后，便緩存在本地。 當下次打開同樣的文章時，會在請求頭中發(fā)送If-None-Match, 給服務(wù)器檢查文件是否發(fā)生變化。如果沒有，則告訴瀏覽器使用本地的，否則返回新文件

//request Headers 
If-None-Match: "751F63A30AB5F98F855D1D90D217B356" 

通常情況下，服務(wù)器默認是打開Etag的，但是為了防止你的同事，或者后臺哥哥的后臺配置文件不正確，關(guān)閉了Etag，這時候，就需要你對對 配置文件 做一些設(shè)置。 這里我以Nginx為例: 打開ngnix.conf文件，檢查是否有以下語句:

etag off; 
more_set_headers -s 404 -t 'ETag'; 
more_clear_headers 'Etag'; 

如果有則將其刪除掉。然后重啟nginx就可以了。他們將Etag關(guān)閉的原因其實也很簡單，就是因為，Etag打開之后會增加服務(wù)器的負載，造成性能的局限性，所以，關(guān)閉或者打開Etag都要經(jīng)過權(quán)衡的。

Last-Modified

這和文檔內(nèi)容信息驗證不同，這里采用的是日期驗證辦法。 即，服務(wù)器上會對文件打上一個文件改動的日期，然后客戶端接受該日期，下次請求時，返回該日期，服務(wù)器驗證，如果日期未變，則告訴瀏覽器使用本地緩存即可。 即，在服務(wù)器的相應(yīng)頭中，可以設(shè)置Last-Modified，來啟用這一緩存協(xié)議.

//Response Header  
Last-Modified:Tue, 03 Mar 2015 01:38:18 GMT 

接受到這一響應(yīng)頭之后，瀏覽器會對該文件做一個緩存，并保存該日期。當下次請求的時候，會通過If-Modified-Since將日期傳入并驗證:

If-Modified-Since:Tue, 03 Mar 2015 01:38:18 GMT 

如果日期未變，則告訴瀏覽器使用緩存。 那我們通常應(yīng)該怎樣啟用服務(wù)器這一功能呢? 默認情況下，服務(wù)器會對靜態(tài)資源發(fā)送Last-modified的tag。 但是，需要注意，Last-Modified的更新時間只能以秒來計，如果你文件改動過于頻繁，Last-Modified是無效的(不過，誰牛逼到1s內(nèi)能多次更新文件嘞~) 實際上.Last-Modified的這個標簽的我們通常并不會單獨使用它，通常與expires結(jié)合，形成一個可降級的緩存.

Expires/Cache-Control

Expires/Cache協(xié)議與上述驗證協(xié)議***的不同在于，他可以省略發(fā)送驗證請求環(huán)節(jié)，不需要服務(wù)器的驗證，而直接使用本地緩存。 通常這種方式，適用于，項目穩(wěn)定，版本迭代不多的時候。

Expires

在服務(wù)器端可以設(shè)置Expires的一個絕對時間。

//Response Headers 
Expires:Tue, 03 May 2016 09:33:34 GMT 

這告訴瀏覽器,在2016.5.3號之前,可以直接使用該文本的緩存副本。但是，可能會因為服務(wù)器和客戶端的GMT時間不同，會有一定的bug。 所以，這里只提議在長時間緩存的情況下使用。否則，應(yīng)該選擇Cache-Control. 那在服務(wù)器端該怎么設(shè)置呢? 這里以nginx為例:

location ~* \.(?:css|js)$ { 
  expires 1d; 
  access_log off; 
  add_header Cache-Control "public"; 
} 

通過 expires 設(shè)置過期時間為一天，此時，服務(wù)器會根據(jù)當前的時間，加上一天.同時添加Expires和Cache-Control頭部標簽。 即,得到的Response Header為:

Expires: Fri, 28 Feb 2014 10:42:09 GMT 
Cache-Control: max-age=86400 //24*60*60 

(HTTP規(guī)定，如果出現(xiàn)max-age和expires，則max-age默認覆蓋掉expires) 當expires為負數(shù)表示no-cache，正數(shù)或零表示max-age=time。 如果你不想緩存，可以直接設(shè)置:

expires -1; //永遠過期，Cache-Control: no-cache 

Cache-Control

這應(yīng)該是HTTP1.1為了解決HTTP1.0中expires的時間差的bug，而新添加的一個tag. 他的配置項很多，其實完全都可以取代expires(現(xiàn)在大多數(shù)服務(wù)器都支持). 引用一段原話:

Cache-Control 頭在 HTTP/1.1 規(guī)范中定義，取代了之前用來定義響應(yīng)緩存策略的頭(例如 Expires)。當前的所有瀏覽器都支持 Cache-Control，因此，使用它就夠了。

不過，目前大部分服務(wù)器都會將兩者添加上，因為HTTP規(guī)定，如果Cache-Control和expires同時出現(xiàn)的話，expires會默認被覆蓋掉。 此時，返回的響應(yīng)碼不再是304(文件未改動),而是200(資源成功訪問).

當前每次發(fā)送請求之前瀏覽器會檢查緩存系統(tǒng)里，是否有相應(yīng)文件的備份，如果有的話，則直接從本地模仿一個Response頭 理論知識鋪墊完畢，我們來take a look. 看看cache-control 有哪些可以配置的屬性(以下屬性都跟在cache-control后)

• public: 共有緩存，可被緩存代理服務(wù)器緩存,比如CDN
• private: 私有緩存，不能被共有緩存代理服務(wù)器緩存，可被用戶的代理緩存如瀏覽器。
• max-age=[秒]：表示在這個時間范圍內(nèi)緩存是新鮮的無需更新。類似Expires時間，不過這個時間是相對的，而不是絕對的。也就是某次請求成功后多少秒內(nèi)緩存是新鮮的。
• s-maxage=[秒]：類似max-age, 除了僅應(yīng)用于共享緩存(如代理)。
• no-cache：這里不是不緩存的意思，只是每次在使用緩存之前都強制發(fā)送請求給源服務(wù)器進行驗證，檢查文件該沒改變(其實這里和ETag/Last區(qū)別不大)
• no-store：就是禁止緩存，不讓瀏覽器保留緩存副本
• must-revalidate：告訴瀏覽器，你這必須再次驗證檢查信息是否過期, 返回的代號就不是200而是304了。
• proxy-revalidate：類似must-revalidate，除了只能應(yīng)用于代理緩存。

比如，這里我可以設(shè)置Cache-Control為:

//Response Headers  
Cache-Control:private, max-age=0, must-revalidate 

該文件是一個私有文件,只能被瀏覽器緩存，而不能被代理緩存。max-age標識該緩存 立即過期 ，其實和no-cache實際上區(qū)別不大. 然后must-revalidate告訴瀏覽器，你必須給我再驗證文件過沒過期，比如接下來可能會驗證Last-Modified或者ETag.如果沒有過期則使用本地緩存. 其實上面可以直接等同于:

//Response Headers  
Cache-Control:private,no-cache 

使用no-store的結(jié)果

//Response Headers 
Cache-Control:no-store; 

這樣表明，不管一不一樣都需要重新下載. 強烈表示，不讓你使用緩存文件。后續(xù)的就不會去驗證ETag了。 當然，如果你將IE6那種古老的瀏覽器考慮進來的話，那你干脆就做的不要臉一點，直接用下面的tag就行:

Cache-Control: no-cache, no-store, must-revalidate //HTTP1.1 
Pragma: no-cache //HTTP1.0 
Expires: 0 //Proxy 

不過現(xiàn)在基本上也沒有不支持Cache-Control的瀏覽器了。所以，正常情況下，可以直接使用.如下的策略來進行設(shè)置:(From google developer )

我們通常在nginx怎么配置對應(yīng)的cache-control頭呢?

##設(shè)置no-cache 
//Nginx 
expires -1; 
//cache-control 
Cache-Control:no-cache 
 
##設(shè)置max-age=0 
//Nginx 
expires 0; 
//cache-control 
Cache-Control:max-age=0 
 
##設(shè)置其他頭部 
//nginx 
add_header  Cache-Control "no-cache"; 
add_header  Pragma no-cache; 

上面說的基本上是服務(wù)器的響應(yīng)頭，那在瀏覽器的Request headers里存在cache-control代表什么呢? 當請求頭中有: Cache-Control: max-age=0 ,表示緩存需要進行驗證(ETag||Last-Modified)，如果緩存未過期,則可以使用。 當請求頭中有: Cache-Control: no-cache ,表示瀏覽器只能獲取***的文件。 和Response Header中的no-store相對應(yīng)。

組合拳法之緩存策略

上面介紹的last/ETag/Expires/Cache都是HTTP協(xié)議的緩存策略。當然，緩存不止這一種，比如在HTML 4.0中定義的某些meta也可以實現(xiàn)自定義緩存的

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 
<meta http-equiv="Pragma" content="no-cache" /> 
<meta http-equiv="Expires" content="0" /> 

但，實際情況是，這些meta只能在file:// 本地文件中使用，如果是服務(wù)器則默認被覆蓋。現(xiàn)在目前主流的就是使用HTTP1.1協(xié)議緩存 不過我們一般都不會單獨使用某一項。 但是，組合之后他們的效果是怎樣的呢?

如果你的網(wǎng)頁不是什么特別定制化的(私密)的，使用緩存能給你網(wǎng)站的性能帶來極大的提升。所以很推薦使用。 一個網(wǎng)站，說白了就是HTML+JS+CSS+fonts+img 這幾類文件(視頻就呵呵了). 我們可以針對這幾類文件做一些緩存層級

上面只是一個簡單的設(shè)置，要知道HTML是一定不能緩存的(大部分網(wǎng)頁)。 緩存設(shè)置時間應(yīng)該在你版本穩(wěn)定之后設(shè)置，否則會得不償失。 另外設(shè)置Cache-Control還可以配合ETag或者Last-Modified進行補償驗證，如果后面文件變化也可以及時反映出來。

清除緩存

最常用的辦法就是修改文件的版本號，或者生成隨機文件名。 如果你只是在本地測試，想手動清楚緩存的話，可以使用.

但是在Mac中不一樣，使用command+R = F5刷新， command+shift+R= ctrl+F5硬性重新加載. 另外，即使你設(shè)置了緩存策略，但是他也不會進行緩存的文件。 這些文件包括動態(tài)認證的文件，比如需要cookie驗證，輸入驗證碼等產(chǎn)生的文件。POST請求文件不能被緩存。