剛看到j(luò)avascript日刊小編面試前端小姐姐悍引，問(wèn)到關(guān)于瀏覽器緩存的一些問(wèn)題，小姐姐沒(méi)有回答上帽氓！趣斤，但是在小編細(xì)心教導(dǎo)下，還是通過(guò)面試＠栊荨浓领！通過(guò)啦！势腮！人性險(xiǎn)惡联贩，我也想有一個(gè)妹紙一起打代碼。不過(guò)看看我們面試官的愛(ài)♂好捎拯，我也不指望這些了泪幌，還是代碼好玩。

話不多少署照，開(kāi)始今天的話題---瀏覽器的緩存機(jī)制

先啰嗦幾句祸泪，后面介紹開(kāi)發(fā)過(guò)程中常用的幾種緩存方案。覺(jué)得比較枯燥的可以直接跳到后面的 ## 開(kāi)發(fā)運(yùn)用 ##藤树，畢竟還是實(shí)用為主浴滴。

前端對(duì)瀏覽器加載文件緩存操作，主要是通過(guò)HTTP頭部信息cache-control岁钓，控制單個(gè)請(qǐng)求文件緩存狀態(tài)升略。靜態(tài)資源掛載到服務(wù)器上微王，使用CDN引入不經(jīng)常更改的資源，HTML5緩存功能品嚣。以及通過(guò)更改資源文件名或者添加時(shí)間戳炕倘，強(qiáng)制重新加載新文件。

緩存策略
└───瀏覽器緩存
│   │
│   └───HTTP緩存機(jī)制
│       │
│       └───本地緩存階段
│                 │  Cache-Control
│                 │  Expires
│       └───協(xié)商緩存階段
│                 │  Last-Modified&if-modified-since
│                 │  ETag&If-None-Match

│   
└───服務(wù)器緩存
    │   CDN緩存
    │   Combo服務(wù)
└───HTML5緩存
    │   離線存儲(chǔ)manifest
    │   本地存儲(chǔ)localStorage

HTTP緩存

HTTP緩存是基于HTTP協(xié)議的瀏覽器文件級(jí)緩存機(jī)制翰撑。即針對(duì)文件的重復(fù)請(qǐng)求情況下罩旋，瀏覽器可以根據(jù)協(xié)議頭判斷從服務(wù)器端請(qǐng)求文件還是從本地讀取文件，chrome控制臺(tái)下的Frames即展示的是瀏覽器的HTTP文件級(jí)緩存眶诈。以下是瀏覽器緩存的整個(gè)機(jī)制流程涨醋。主要是針對(duì)重復(fù)的HTTP請(qǐng)求，在有緩存的情況下判斷過(guò)程主要分3步：

• 判斷expires逝撬，如果未過(guò)期浴骂，直接讀取HTTP緩存文件，不發(fā)HTTP請(qǐng)求宪潮，否則進(jìn)入下一步
• 判斷是否含有etag溯警，有則帶上if-none-match發(fā)送請(qǐng)求，未修改返回304狡相，修改返回200梯轻，否則進(jìn)入下一步
• 判斷是否含有last-modified，有則帶上if-modified-since發(fā)送請(qǐng)求尽棕，無(wú)效返回200喳挑，有效返回304，否則直接向服務(wù)器請(qǐng)求
  

以上3步可以也可以視為3個(gè)階段：

• 讀取本地緩存階段：先在本地查找該文件資源消息報(bào)頭萄金，也就是header中的Expires,Cache-Control蟀悦，查看緩存資源是否能重新被使用，是否需要再次加載氧敢。如果該緩存文件允許被使用日戈，瀏覽器就直接從緩存中加載這個(gè)文件，連請(qǐng)求都不會(huì)發(fā)送到網(wǎng)頁(yè)所在服務(wù)器孙乖；
• 協(xié)商緩存浙炼，如果本地緩存沒(méi)有被允許直接加載使用，瀏覽器一定會(huì)發(fā)送一個(gè)請(qǐng)求到服務(wù)器唯袄，通過(guò)服務(wù)器端依據(jù)資源的另外一些http header驗(yàn)證這個(gè)資源是否有修改弯屈，如果沒(méi)有被修改，服務(wù)器會(huì)將這個(gè)請(qǐng)求返回恋拷，但是不會(huì)返回這個(gè)資源的數(shù)據(jù)资厉，而是告訴客戶(hù)端可以直接從緩存中加載這個(gè)資源，于是瀏覽器就又會(huì)從自己的緩存中去加載這個(gè)資源蔬顾；
• 緩存調(diào)用失斞绯ァ：如果協(xié)商緩存發(fā)現(xiàn)服務(wù)器上資源比對(duì)本地緩存有修改湘捎，或者完全是一個(gè)新的資源，瀏覽器直接從服務(wù)器上加載資源數(shù)據(jù)窄刘。

通俗易懂的說(shuō)法窥妇，你的冰箱里有一瓶牛奶（瀏覽器加載好的資源文件），瓶子上有生產(chǎn)日期娩践，保質(zhì)期活翩，品牌名稱(chēng)（服務(wù)器）。作為資深宅男的你翻伺，肯定是得看一看牛奶的生產(chǎn)日期材泄，畢竟喝過(guò)上次喝過(guò)82年的雪碧后通透的感覺(jué)影響了你很久，如果牛奶還在生產(chǎn)日期內(nèi)（Cache-Control）吨岭，你當(dāng)然是可以直接使用的脸爱，如果你牛奶到期了，你很窮舍不得直接扔掉未妹，假如沒(méi)壞扔了不可惜么，于是你拿著牛奶找到該品牌檢測(cè)空入，別人首先拿著他們產(chǎn)品應(yīng)該有的標(biāo)準(zhǔn)比對(duì)你拿過(guò)來(lái)的牛奶的檢測(cè)結(jié)果络它，如果別人告訴你沒(méi)有什么變化，你想了想歪赢，也沒(méi)什么毛病化戳，舔舔繼續(xù)喝了（繼續(xù)使用瀏覽器緩存）。如果別人告訴你這個(gè)牛奶的品質(zhì)已經(jīng)改變了埋凯，為了你的身體健康点楼，給你換了瓶新的牛奶（直接加載新的資源文件）。
PS：以上純屬虛構(gòu)白对，碼農(nóng)怎么會(huì)有牛奶喝呢掠廓，窮的只能舔蓋兒了。
PPS：為了您和您家人的身體健康甩恼，請(qǐng)定期清理過(guò)期食品蟀瞧。

開(kāi)發(fā)運(yùn)用

如果我們不去設(shè)置expires和cache-control，瀏覽器會(huì)默認(rèn)緩存圖片条摸、css和js等靜態(tài)資源悦污，這對(duì)用戶(hù)來(lái)說(shuō)是挺不錯(cuò)的優(yōu)化，用戶(hù)不用每次都重新加載文件钉蒲，可以直接使用瀏覽器的緩存切端。但對(duì)于我們開(kāi)發(fā)者來(lái)說(shuō)，會(huì)碰到需要緩存的場(chǎng)景和不需要緩存的場(chǎng)景顷啼，那么我們?nèi)绾伟凑詹煌男枨笕ピO(shè)置呢踏枣。

• 1昌屉、在html的head部分添加meta屬性，這種添加是很不靠譜的椰于，基本不會(huì)生效

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

• 2怠益、通過(guò)在ajax請(qǐng)求時(shí)添加header屬性

$.ajax({
    url : 'url',
    dataType : "json",
    cache: true,
    success : function(xml, status){    
          }
 });

• 3、或者在請(qǐng)求中加入時(shí)間戳ts參數(shù)瘾婿，

$.ajax({
      url:url,
      data:{
            ts:'20179121480'
      }
})

• 4蜻牢、由后端添加Cache-Control字段
  Node.js
  response.setHeader('Cache-Control', 'max-age=31536000');

靜態(tài)資源

那些通過(guò)鏈接形式加載的Css、js偏陪、圖片等資源文件抢呆，瀏覽器將一直使用本地緩存而導(dǎo)致得不到更新，我們可以通過(guò)改變文件的url來(lái)讓瀏覽器重新下載文件笛谦，

• 1抱虐、打包過(guò)程中生成hash文件名，每一次更新的版本都是不同的url加載饥脑，
  <script type="text/javascript" src="../src/js/dfdswghejkfd.js"></script>
• 2恳邀、URL中添加時(shí)間戳ts
  <script type="text/javascript" src="../src/js/default.js?ts=20179121480"></script>
• 3、文件名中加入版本號(hào)原理和生成hash文件名是一樣的灶轰，都是更改了文件名谣沸，如果有大量這類(lèi)操作，一般使用用打包工具完成
  <script type="text/javascript" src="../src/js/lib/jquery-1.11.3.min.js"></script>
• 4 通過(guò)后端給資源請(qǐng)求添加ts時(shí)間戳字段笋颤，強(qiáng)制資源重新加載乳附。

CDN

CDN的全稱(chēng)是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)**伴澄。其目的是使用戶(hù)可就近取得所需內(nèi)容赋除，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶(hù)訪問(wèn)網(wǎng)站的響應(yīng)速度非凌。類(lèi)似分布各地的物流倉(cāng)儲(chǔ)網(wǎng)絡(luò)举农，CDN網(wǎng)絡(luò)可以將源站的內(nèi)容緩存到分布全球的CDN節(jié)點(diǎn)，根據(jù)用戶(hù)的訪問(wèn)IP清焕，就近連接CDN并蝗，提高網(wǎng)站響應(yīng)速度。

Combo

實(shí)現(xiàn)靜態(tài)資源合并的秸妥。combo服務(wù)滚停，也就是我們?cè)谧罱K拼接生成頁(yè)面資源引用的時(shí)候，并不是生成多個(gè)獨(dú)立的link標(biāo)簽粥惧，而是將資源地址拼接成一個(gè)url路徑键畴，請(qǐng)求一種線上的動(dòng)態(tài)資源合并服務(wù)，從而實(shí)現(xiàn)減少HTTP請(qǐng)求的需求，比如前面的例子起惕，稍作調(diào)整即可得到這樣的結(jié)果：
<link rel="stylesheet" type="text/css" href="/file1"/>
<link rel="stylesheet" type="text/css" href="/file2"/>
<link rel="stylesheet" type="text/css" href="/file3"/>
合并==>
<link rel="stylesheet" type="text/css" href="http://??file1,file2,file3,…"/>
這個(gè) /??file1,file2,file3,… 的url請(qǐng)求響應(yīng)就是動(dòng)態(tài)combo服務(wù)提供的涡贱，它的原理很簡(jiǎn)單，就是根據(jù)url找到對(duì)應(yīng)的多個(gè)文件惹想，合并成一個(gè)文件來(lái)響應(yīng)請(qǐng)求问词，并將其緩存，以加快訪問(wèn)速度嘀粱。

數(shù)據(jù)庫(kù)數(shù)據(jù)緩存

后端數(shù)據(jù)庫(kù)方面的激挪，不是很清楚，挖個(gè)坑锋叨，后面補(bǔ)足后端知識(shí)后再填垄分。

常用的HTML5緩存

• manifest
  通過(guò)一個(gè)入口文件manifest羅列需要被緩存的文件清單。
  單開(kāi)補(bǔ)充

• localStorage
  作為可以讓前端脫離沙盒工作模式娃磺，為數(shù)不多的技術(shù)薄湿，單獨(dú)拿出來(lái)聊一聊。
  前端開(kāi)發(fā)者的后花園locaStorage

參考

HTML5 離線緩存-manifest簡(jiǎn)介
HTTP緩存（推薦閱讀）
瀏覽器緩存機(jī)制剖析
Web緩存策略總結(jié)（推薦閱讀）
日刊公眾號(hào)：FedJavaScript