瀏覽器緩存讀取機制大解底

近幾天重溫了下瀏覽器緩存相關的知識，不由好像回到了三年前找工做的時光，爲了不再次忘記，就作下筆記，若有紕漏，忘大神指正

 

概念主要有幾個，Cache-control,Expries,Etag,Last-modify，查了下英文字典，發現有三個單詞意思差很少,好失望。

先重瀏覽器加載資源提及吧，

瀏覽器加載頁面，對應頁面的資源，假如檢測到有緩存的話：

1、先判斷瀏覽器是否過時，判斷的方式是：Cache-control和Expries。

　　Cache-control和Expries都指明當前資源的有效期，控制瀏覽器是否讀取本地緩存，Cache-control長得好，選項比較多，看臉的時代，好看的必然會比較優先考慮（潛規則）。

　　Cache-control :

　　1.max-age:指明緩存時間的有效時長，從請求開始時間開始算。

　　2.S-maxage:CDN的max-age（不知道什麼是CDN？去問百度吧~）。

　　3.pubic:任何途徑的緩存者（本地緩存，代理服務器（相似上面說的CDN）），都無條件的緩存資源，感受好像公交車，誰都能上。

　　4.private:有公共就會對應有私有，只針對單個用戶或窗口緩存資源，被包養的感受。

　　5.no-cache:資源不讀取緩存，可是能在本地緩存。

　　6.no-store:資源不能再本地緩存（既然沒緩存，就只能去找服務器加載了）。

 　　Expries:

　　緩存資源的過時時間，沒到過時時間就讀緩存

2、過時以後，判斷Etag

　　 根據實體內容生成一段hash字符串，標識資源的狀態，由服務端產生。

　　 在配置了Etag的狀況下，第一次請求頁面資源時候，本地緩存會在資源添加Etag（相似版本號），在第二次請求時候，請求會帶着Etag，服務器會判斷Etag是否發生改變來肯定可否讀取本地緩存，沒改變則返回304。

3、在判斷了Etag以後，假如不讀取本地緩存，則再判斷Last-Modified

　　Last-Modified：服務器端文件的最後修改時間，須要和cache-control共同使用，當瀏覽器再次進行請求時，會向服務器傳送If-Modified-Since報頭，詢問Last-Modified時間點以後資源是否被修改過。若是沒有修改，則返回碼爲304，使用緩存；若是修改過，則再次去服務器請求資源，返回碼和首次請求相同爲200，資源爲服務器最新資源。

題外話：

Etag對比Last-modified的優勢

 a、某些服務器不能精確獲得資源的最後修改時間，這樣就沒法經過最後修改時間判斷資源是否更新 

 b、若是資源修改很是頻繁，在秒如下的時間內進行修改，而Last-modified只能精確到秒 

 c、一些資源的最後修改時間改變了，可是內容沒改變，使用ETag就認爲資源仍是沒有修改的。

瀏覽器相關操做：

F5：Cache-Control和Expries，這就是開發時候改了東西刷刷瀏覽器就出現效果了的緣由。

Ctrl+F5:Cache-Control和Expries,Etag和Last-modify會無效，有些同窗會問，更新資源的時候，那爲何有時候要加長長的版本號才能看到效果呀，沒加版本號本地怎麼刷資源都是舊的。由於瀏覽器讀取的資源是CDN的資源，而你更新的是服務器的資源，因此先叫運維刷緩存吧。

 

參考資料：

http://www.alloyteam.com/2012/03/web-cache-2-browser-cache/

http://www.alloyteam.com/2016/03/discussion-on-web-caching/