如果讓我們?nèi)崿F(xiàn)一個HTTP緩存機制麦轰，我們應(yīng)該怎么去實現(xiàn)呢怜庸，接下來我們將帶著這個去閱讀這篇文章!
思路1,無緩存
假設(shè)瀏覽器向服務(wù)器請求資源a.html時,服務(wù)器找到對應(yīng)的資源a.html,然后將資源返回給瀏覽器。當(dāng)瀏覽器再次向服務(wù)器請求該資源時米绕，服務(wù)器將再次將該資源返回給瀏覽器瑟捣。
優(yōu)點：簡單。栅干。
缺點：每次請求資源都需要服務(wù)器查找迈套，然后再返回資源，導(dǎo)致服務(wù)器相應(yīng)慢碱鳞，浪費帶寬桑李。
思路2贵白，有緩存無更新
我們通過思路1的思考禁荒，忽然大悟呛伴！哦热康，原來每次請求資源會導(dǎo)致這樣的問題啊姐军，那么我們加個緩存不就好了嗎庶弃？哈哈歇攻，我真是太天才了缴守。因此接下來屡穗，瀏覽器第一次請求資源a.html時，服務(wù)器會響應(yīng)并發(fā)送完整文件烂斋，然后瀏覽器可以把這個文件存到本地（緩存）础废，下次瀏覽器再次請求該資源時，就直接讀取本地緩存就可以帘瞭，這應(yīng)就能提高網(wǎng)頁響應(yīng)速度和省下帶寬了蝶念。
優(yōu)點：省帶寬媒殉，提高頁面響應(yīng)速度适袜。
缺點：果服務(wù)器上a.html的文件內(nèi)容變了，瀏覽器每次都從緩存讀取無法獲取最新文件
思路3给猾，緩存+更新機制
我們接下來思考敢伸！唔池颈，思路二還是存在重大缺點钓丰，得去改進它携丁。接下瀏覽器在請求a.html時服務(wù)器會發(fā)送完整的文件，并且服務(wù)器發(fā)送的文件還附帶額外的信息——過期時間揭保，如** Expires: Mon,10 Dec 1990 02:25:22GMT**，瀏覽器可以把這個文件和額外信息存到本地宠互。當(dāng)瀏覽器再次想服務(wù)器請求a.html時，瀏覽器就會用當(dāng)前的時間和Expires的時間作比較励负，如果還在Expires規(guī)定的時間內(nèi)继榆，則會使用本地緩存的a.html(200, from xx cache)略吨；否則再次向服務(wù)器再次請求a.html(200)。 服務(wù)器在每次給資源的時候都會發(fā)送新的過期時間乞榨。
優(yōu)點：緩存可控制
缺點：控制的功能太單一吃既，很有可能服務(wù)器a.htm更新了河质，客戶端還在用舊的資源掀鹅。
思路4乐尊，緩存+更新機制升級版
上面我們已經(jīng)實現(xiàn)了簡單的緩存的更新機制科吭。但是還是覺得不太智能对人，功能太單一姻几，我們思考一下蛇捌，看一下應(yīng)該如何完善络拌。HTTP1.1版本提供了Cache-Control讓我們更好地去控制緩存春贸。
比如：瀏覽器第一次請求a.html 時萍恕，服務(wù)器會發(fā)送完整的文件并附帶額外信息。
Cache-Control: max-age=300类垫；
瀏覽器把文件和附帶信息保存起來悉患。當(dāng)再次需要a.html 時，如果是在300秒以內(nèi)發(fā)起的請求則直接使用緩存(200, from xx cache)谴仙，否則重新發(fā)起網(wǎng)絡(luò)請求(200)晃跺。(和Expires有點類似)掀虎，下面是Cache-Control常見的幾個值：
<li>Public表示相應(yīng)可以被任何中間節(jié)點緩存，如 Browser <-- proxy1 <-- proxy2 <-- Server驰怎，中間的代理可以緩存資源县忌，比如下次再請求同一資源proxy1直接把自己緩存的東西給 Browser 而不再向proxy2要。</li>
<li>Private表示中間節(jié)點不能緩存厉颤，對于Browser <-- proxy1 <-- proxy2 <-- Server逼友，proxy2 會老老實實把Server 返回的數(shù)據(jù)發(fā)送給proxy1翁逞，proxy1 會老老實實把Server 返回的數(shù)據(jù)發(fā)送給Browser ，自己不緩存任何數(shù)據(jù)怨喘。當(dāng)下次Browser再次請求時proxy會做好請求轉(zhuǎn)發(fā)而不是自作主張給自己緩存的數(shù)據(jù)必怜。</li>
<li>no-catch表示不使用 Cache-Control的緩存控制方式做前置驗證，而是使用 Etag 或者Last-Modified字段來控制緩存 </li>
<li>no-store 膏执，真正的不緩存任何東西更米。瀏覽器會直接向服務(wù)器請求原始文件征峦，并且請求中不附帶 Etag 參數(shù)(服務(wù)器認為是新請求)类腮。</li>
<li>max-age存哲，表示當(dāng)前資源的有效時間祟偷，單位為秒修肠。</li>
優(yōu)點：緩存功能更為強大。
缺點：加入瀏覽器再次請求a.html莽鸭，而緩存存在的時間間隔超過max-age設(shè)置的足淆，這時候向服務(wù)器發(fā)送請求服務(wù)器應(yīng)該會重新返回a.html的完整文件巧号。假如姥闭，請求的a.html和原來的a.html一樣丹鸿，沒有任何改變，則這就浪費了帶寬了棚品。
思路5靠欢，緩存+更新機制終極版
鑒于思路4的實現(xiàn)方式還是有瑕疵，因此我們在思考一下铜跑。
比如:瀏覽器第一次請求a.html的時候门怪，服務(wù)器響應(yīng)發(fā)送完整的文件并附帶額外信息秧廉，其中Etag 是 對a.html文件的編碼减拭，如果服務(wù)端的a.html沒有修改可霎，則這個值就不會變旺罢。
Cache-Control: max-age=300跪解；
ETag:W/"e-cbxLFQW5zapn79tQwb/g6Q"
瀏覽器把a.html和額外信息存放在本地节吮，當(dāng)緩存在max-age設(shè)置的時間間隔內(nèi)帚豪，則直接讀取緩存a.html(200, from xx cache)，假如瀏覽器在300秒之后再次需要獲取a.html時，瀏覽器發(fā)現(xiàn)該緩存的文件已經(jīng)不新鮮了于是就向服務(wù)器發(fā)送請求 重新獲取a.html,在發(fā)送請求的時候附帶剛剛保存的a.html的ETag ( If-None-Match：W/"e-cbxLFQW5zapn79tQwb/g6Q")，服務(wù)器在接收到請求后拿瀏覽器請求的 Etag 和當(dāng)前文件重新計算后端 Etag 做個比較，如果二者相等表示文件未修改則發(fā)送這個短消息（響應(yīng)頭，不包含圖片內(nèi)容, 304），如果二者不等則發(fā)送新文件和新的 ETag，瀏覽器獲取新文件并更新該文件的 Etag。
另外與Etag相似的是Last-Modified/If-Modified-Since。當(dāng)資源過期時（max-age超時），發(fā)現(xiàn)資源具有Last-Modified聲明，則再次向web服務(wù)器請求時帶上頭 If-Modified-Since笋籽，表示請求時間。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-Modified-Since 則與被請求資源的最后修改時間進行比對。若最后修改時間較新，說明資源又被改動過，則響應(yīng)整片資源內(nèi)容（200）稚茅，若最后修改時間較舊，說明資源無新修改，則響應(yīng)HTTP 304 ，告知瀏覽器繼續(xù)使用所保存的cache呻惕。
總結(jié)
經(jīng)過帶著問題键耕，不斷提出新的思路，我們最終實現(xiàn)控制緩存的比較好的方式。其實HTTP對于前端是非常重要温艇，尤其當(dāng)我們學(xué)習(xí)了Node.js或者其他后端語言去寫web服務(wù)端的時候邻寿，我們發(fā)現(xiàn)離不開HTTP蒜撮，因此我們應(yīng)該要注重HTTP的知識，而不只是比較這個框架好债蜜，還是那個框架牛向胡。況且框架的使用視業(yè)務(wù)場景而定淮捆。
