1.背景介紹
做前端有兩個比較令人頭痛的事，一個是命名，另一個就是緩存了。HTTP協(xié)議提供了非常強(qiáng)大的緩存機(jī)制， 了解這些緩存機(jī)制，對提高網(wǎng)站的性能非常有幫助。
2.知識剖析
什么是瀏覽器緩存
瀏覽器緩存(Brower Caching)是瀏覽器在本地磁盤對用戶最近請求過的文檔進(jìn)行存儲，當(dāng)訪問者再次訪問同一頁面時，瀏覽器就可以直接從本地磁盤加載文檔。
瀏覽器是如何判斷是否使用緩存的
瀏覽器緩存的優(yōu)點有：
1.減少了冗余的數(shù)據(jù)傳輸，節(jié)省了網(wǎng)費(fèi)
2.減少了服務(wù)器的負(fù)擔(dān)，大大提升了網(wǎng)站的性能
3.加快了客戶端加載網(wǎng)頁的速度
瀏覽器緩存主要有兩類：緩存協(xié)商和徹底緩存，也有稱之為協(xié)商緩存和強(qiáng)緩存。
1.強(qiáng)緩存：不會向服務(wù)器發(fā)送請求，直接從緩存中讀取資源，在chrome控制臺的network選項中可以看到該請求返回200的狀態(tài)碼;
2.協(xié)商緩存：向服務(wù)器發(fā)送請求，服務(wù)器會根據(jù)這個請求的request header的一些參數(shù)來判斷是否命中協(xié)商緩存，如果命中，則返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源；
兩者的共同點是，都是從客戶端緩存中讀取資源；區(qū)別是強(qiáng)緩存不會發(fā)請求，協(xié)商緩存會發(fā)請求。
緩存中header的參數(shù)：
強(qiáng)制緩存
Expires：response header里的過期時間，瀏覽器再次加載資源時，如果在這個過期時間內(nèi)，則命中強(qiáng)緩存。
Cache-Control：當(dāng)值設(shè)為max-age=300時，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內(nèi)再次加載資源，就會命中強(qiáng)緩存。
cache-control除了該字段外，還有下面幾個比較常用的設(shè)置值：
-no-cache：不使用本地緩存。需要使用緩存協(xié)商，先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改，如果之前的響應(yīng)中存在ETag，那么請求的時候會與服務(wù)端驗證，如果資源未被更改，則可以避免重新下載。
-no-store：直接禁止瀏覽器緩存數(shù)據(jù)，每次用戶請求該資源，都會向服務(wù)器發(fā)送一個請求，每次都會下載完整的資源。
-public：可以被所有的用戶緩存，包括終端用戶和CDN等中間代理服務(wù)器。
-private：只能被終端用戶的瀏覽器緩存，不允許CDN等中繼緩存服務(wù)器對其緩存。
協(xié)商緩存
Last-Modify/If-Modify-Since：瀏覽器第一次請求一個資源的時候，服務(wù)器返回的header中會加上Last-Modify，Last-modify是一個時間標(biāo)識該資源的最后修改時間；當(dāng)瀏覽器再次請求該資源時，request的請求頭中會包含If-Modify-Since，該值為緩存之前返回的Last-Modify。服務(wù)器收到If-Modify-Since后，根據(jù)資源的最后修改時間判斷是否命中緩存
Etag：web服務(wù)器響應(yīng)請求時，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識（生成規(guī)則由服務(wù)器決定）。
If-None-Match：當(dāng)資源過期時（使用Cache-Control標(biāo)識的max-age），發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請求時帶上頭If-None-Match （Etag的值）。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-None-Match 則與被請求資源的相應(yīng)校驗串進(jìn)行比對，決定是否命中協(xié)商緩存；
ETag和Last-Modified的作用和用法，他們的區(qū)別：
1.Etag要優(yōu)于Last-Modified。Last-Modified的時間單位是秒，如果某個文件在1秒內(nèi)改變了多次，那么他們的Last-Modified其實并沒有體現(xiàn)出來修改，但是Etag每次都會改變確保了精度；
2.在性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務(wù)器通過算法來計算出一個hash值；
3.在優(yōu)先級上，服務(wù)器校驗優(yōu)先考慮Etag。
瀏覽器緩存過程
1.瀏覽器第一次加載資源，服務(wù)器返回200，瀏覽器將資源文件從服務(wù)器上請求下載下來，并把response header及該請求的返回時間一并緩存；
2.下一次加載資源時，先比較當(dāng)前時間和上一次返回200時的時間差，如果沒有超過cache-control設(shè)置的max-age，則沒有過期，命中強(qiáng)緩存，不發(fā)請求直接從本地緩存讀取該文件（如果瀏覽器不支持HTTP1.1，則用expires判斷是否過期）；如果時間過期，則向服務(wù)器發(fā)送header帶有If-None-Match和If-Modified-Since的請求
3.服務(wù)器收到請求后，優(yōu)先根據(jù)Etag的值判斷被請求的文件有沒有做修改，Etag值一致則沒有修改，命中協(xié)商緩存，返回304；如果不一致則有改動，直接返回新的資源文件帶上新的Etag值并返回200；；
4.如果服務(wù)器收到的請求沒有Etag值，則將If-Modified-Since和被請求文件的最后修改時間做比對，一致則命中協(xié)商緩存，返回304；不一致則返回新的last-modified和文件并返回200；；
3.常見問題
用戶行為對瀏覽器緩存的影響
4.解決方案
點擊刷新按鈕或者按F5
瀏覽器直接對本地的緩存文件過期，但是會帶上If-Modifed-Since，If-None-Match,這就意味著服務(wù)器會對文件檢查新鮮度，返回結(jié)果可能是304，也有可能是200.
用戶按Ctrl+F5（強(qiáng)制刷新）
瀏覽器不僅會對本地文件過期，而且不會帶上 If-Modifed-Since，If-None-Match，相當(dāng)于之前從來沒有請求過，返回結(jié)果是200.
地址欄回車
瀏覽器發(fā)起請求，按照正常流程，本地檢查是否過期，然后服務(wù)器檢查新鮮度，最后返回內(nèi)容。
5.參考文獻(xiàn)
參考一：http強(qiáng)制緩存和協(xié)議緩存http://www.cnblogs.com/wonyun/p/5524617.html
其他的常見瀏覽器狀態(tài)
400 Bad Request
1、語義有誤，當(dāng)前請求無法被服務(wù)器理解。除非進(jìn)行修改，否則客戶端不應(yīng)該重復(fù)提交這個請求。
2、請求參數(shù)有誤。
415 Unsupported Media Type
對于當(dāng)前請求的方法和所請求的資源，請求中提交的實體并不是服務(wù)器中所支持的格式，因此請求被拒絕。
