剛看到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ù)，而是告訴客戶端可以直接從緩存中加載這個(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ì)用戶來(lái)說(shuō)是挺不錯(cuò)的優(yōu)化，用戶不用每次都重新加載文件，可以直接使用瀏覽器的緩存。但對(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ò)**。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問(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ù)用戶的訪問(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