<script type="text/javascript" src="lib/common.js?v=20190719"></script>
<link rel="stylesheet" type="text/css" href="assets/css/ie/ie8.css?v=20190719" />

document.write('<script src=\".lib/common.js?r=' + Math.random() + "\"" + '><\/script>');

entry: {
 main: './src/common.js',
 slove: './src/ie8.js'
},
output: {
 filename: '[name].[hash].js',
 path: path.resolve(__dirname, 'dist')
}

<script type="text/javascript" src="lib/common.js?v=20190719"></script>
<link rel="stylesheet" type="text/css" href="assets/css/ie/ie8.css?v=20190719" />

document.write('<script src=\".lib/common.js?r=' + Math.random() + "\"" + '><\/script>');

entry: {
 main: './src/common.js',
 slove: './src/ie8.js'
},
output: {
 filename: '[name].[hash].js',
 path: path.resolve(__dirname, 'dist')
}

覽器緩存對(duì)于前端一點(diǎn)都不陌生，最常見的就是，新版本上線了，測(cè)試卻說這怎么還沒有變化呢？使用 ctr + F5 強(qiáng)制刷新之后，立馬就好了。或者清除瀏覽器緩存，按住ctr+shift+delete，彈出如圖：

我們會(huì)發(fā)現(xiàn)目前瀏覽器緩存的圖片和文件的大小。或者進(jìn)入chrome://chrome-urls/找到chrome://cache/ 就可以看到所有緩存的地址列表。對(duì)于瀏覽器緩存，前端對(duì)它是又愛又恨，有時(shí)想保留，有時(shí)想禁掉，所以看看瀏覽器緩存到底是怎樣的？

一、什么是瀏覽器緩存？

瀏覽器緩存就是瀏覽器根據(jù) url 第一次訪問網(wǎng)站之后，將網(wǎng)站的 html、css、js、圖片等文件復(fù)制一份保留到瀏覽器中，當(dāng)你二次訪問這個(gè) url 的網(wǎng)站時(shí)，如果網(wǎng)站沒有明確表示有更新時(shí)，瀏覽器直接在緩存中查找內(nèi)容，不會(huì)再次請(qǐng)求網(wǎng)頁內(nèi)容，只有網(wǎng)頁明確表示有更新時(shí)，瀏覽器才會(huì)向服務(wù)器發(fā)起網(wǎng)路請(qǐng)求，再次下載網(wǎng)頁。

如上圖，百度首頁就是使用了緩存機(jī)制，首次訪問之后 web資源被緩存，在后面重復(fù)請(qǐng)求中，資源直接在緩存中讀取，而不是向服務(wù)器請(qǐng)求資源。

二、為什么使用緩存？

2.1、為什么很多網(wǎng)站二次打開速度很快？

網(wǎng)頁二次打開很快，主要原因是第一次加載頁面過程中，緩存了部分耗時(shí)數(shù)據(jù)，這一現(xiàn)象，對(duì)于單頁面應(yīng)用開發(fā)非常明顯。

上一篇文章《瀏覽器工作原理》中，瀏覽器工作流程介紹，輸入網(wǎng)址回車以后瀏覽器向服務(wù)器發(fā)起服務(wù)之前，會(huì)現(xiàn)在瀏覽器緩存中查詢是否有需要的文件？如果有則直接在緩存中獲取文件，避免向服務(wù)器請(qǐng)求和下載文件，所以節(jié)省了一部分時(shí)間。

2.2、瀏覽器緩存優(yōu)點(diǎn)

1、減少網(wǎng)絡(luò)帶寬消耗

對(duì)于網(wǎng)站運(yùn)營者或者訪問網(wǎng)頁的用戶，帶寬就代表著 money ，過多的消耗帶寬，我們服務(wù)器配置就得升級(jí)，使用瀏覽器緩存之后，就會(huì)減少網(wǎng)絡(luò)流量，降低運(yùn)營成本。

2、降低服務(wù)器壓力

使用瀏覽器緩存之后，除第一次訪問需要向服務(wù)器請(qǐng)求網(wǎng)站全部資源，后續(xù)訪問可以重復(fù)使用瀏覽器本地緩存，減少對(duì)服務(wù)器的請(qǐng)求，間接降低服務(wù)器的壓力，同時(shí)，搜索引擎的爬蟲也會(huì)根據(jù)緩存過期機(jī)制降低抓取的頻率，也可以降低服務(wù)器壓力。

3、減少網(wǎng)絡(luò)延遲，加快網(wǎng)頁加載

瀏覽器緩存 web資源后，減少網(wǎng)絡(luò)請(qǐng)求，可以更快速地獲取到服務(wù)器返回?cái)?shù)據(jù)，同時(shí)使用瀏覽器緩存內(nèi)的文件比服務(wù)器獲取快很多，所以網(wǎng)頁加載速度明顯快很多。

三、瀏覽器的緩存規(guī)則

對(duì)于瀏覽器端的緩存來講，這些規(guī)則是在 http 協(xié)議和 meta 標(biāo)簽中定義的。分別從兩個(gè)維度：新鮮度和校驗(yàn)值，規(guī)定瀏覽器是否可以直接使用緩存中的副本，還是直接從服務(wù)器獲取最新資源。

3.1、新鮮度(過期)：瀏覽器緩存的有效期，緩存必須滿足以下兩個(gè)條件，瀏覽器才會(huì)認(rèn)為是最新的，可以直接使用。

• 含有完整的過期時(shí)間控制頭信息，并在有效期內(nèi)。
• 瀏覽器已經(jīng)使用過這個(gè)副本，并且在會(huì)話中已經(jīng)檢查過新鮮度。

3.2、校驗(yàn)值(驗(yàn)證)：服務(wù)器返回資源的時(shí)候，會(huì)在響應(yīng)頭信息中帶上資源實(shí)體標(biāo)簽 Entity Tag，可以用來作為瀏覽器再次請(qǐng)求過程的校驗(yàn)標(biāo)識(shí)，如果發(fā)現(xiàn)校驗(yàn)標(biāo)識(shí)不匹配，說明資源已經(jīng)被修改過或過期，瀏覽器需要重新請(qǐng)求資源。

四、如何控制緩存？

緩存規(guī)則可以設(shè)置在html的meta標(biāo)簽，也可以設(shè)置在http協(xié)議頭內(nèi)。

4.1、前端 html 中 meta 標(biāo)簽

在 html 頁面中加入緩存設(shè)置，代碼如下：

<meta http-equiv="Pragma" content="no-cache"  />
<!-- Pragma是http1.0版本中給客戶端設(shè)定緩存方式之一 -->

上邊代碼，禁止瀏覽器緩存，瀏覽器每次訪問網(wǎng)頁都要去服務(wù)器請(qǐng)求。事實(shí)這種禁用緩存形式作用有限：

• 只有IE瀏覽器才能標(biāo)識(shí)這段 meta 的含義，其他主流瀏覽器僅認(rèn)識(shí) “Cache-Control:no-store” 的 meta 標(biāo)簽。
• 在IE瀏覽器中，并不一定添加 pragma，但是會(huì)讓當(dāng)前網(wǎng)頁每次都會(huì)向服務(wù)器發(fā)送請(qǐng)求。

4.2、HTTP協(xié)議頭

http請(qǐng)求和響應(yīng)頭中，與緩存相關(guān)的常見類型：

各種類型之間的關(guān)系和區(qū)別：

• Cache-Control 與 Expires：它兩作用一樣，都表明當(dāng)前資源的有效期，控制瀏覽器是取緩存還是直接向服務(wù)器獲取，Cache-Control可以設(shè)置的更細(xì)致，如果同時(shí)設(shè)置，它的優(yōu)先級(jí)高于Expires。
• Last-Modified / ETag 與 Cache-Control / Expires：配置Last-Modified/ETag的情況下，瀏覽器再次訪問URL的資源，還是會(huì)發(fā)送請(qǐng)求到服務(wù)器，詢問文件是否已經(jīng)修改，如果沒有，服務(wù)器會(huì)給瀏覽器返回304，瀏覽器直接從本地緩存中取就好了，反之，服務(wù)器會(huì)直接向?yàn)g覽器返回?cái)?shù)據(jù)。Cache-Control / Expires 檢測(cè)本地緩存是否還在有效期內(nèi)，在有效期內(nèi)，直接使用本地緩存，阻止發(fā)送請(qǐng)求。如果同時(shí)設(shè)置，Cache-Control / Expiress 優(yōu)先級(jí)更高。一般情況下，兩者配合使用，因?yàn)榧词狗?wù)器設(shè)置緩存時(shí)間, 當(dāng)用戶點(diǎn)擊“刷新”按鈕時(shí)，瀏覽器會(huì)忽略緩存繼續(xù)向服務(wù)器發(fā)送請(qǐng)求，這時(shí)Last-Modified/ETag將能夠很好利用304，從而減少響應(yīng)開銷。
• Last-Modified 與 ETag：ETag主要是為了解決Last-Modified比較難解決的問題：1、Last-Modified標(biāo)注的最后修改只能精確到秒級(jí)，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的新鮮度。2、如果某些文件會(huì)被定期生成，當(dāng)有時(shí)內(nèi)容并沒有任何變化，但Last-Modified卻改變了，導(dǎo)致文件沒法使用緩存。3、有可能存在服務(wù)器沒有準(zhǔn)確獲取文件修改時(shí)間，或者與代理服務(wù)器時(shí)間不一致等情形。ETag是服務(wù)器自動(dòng)生成或開發(fā)者生成對(duì)應(yīng)資源在服務(wù)器的唯一標(biāo)識(shí)符，能夠更加精準(zhǔn)控制緩存。兩者可以一起使用，服務(wù)器優(yōu)先驗(yàn)證ETag，一致時(shí)，才會(huì)繼續(xù)比對(duì)Last-Mofifed，才決定是否要返回304。

五、不能緩存的請(qǐng)求

并不是所有的請(qǐng)求都能被緩存，無法被緩存的有：

• post 請(qǐng)求無法被緩存。
• 需要根據(jù)cookie、認(rèn)證信息等決定輸入內(nèi)容的動(dòng)態(tài)請(qǐng)求不能被緩存。
• http響應(yīng)頭中不包含Last-Modified/ETag，也不包含Cache-Control/Expiress的請(qǐng)求無法被緩存。
• http信息頭明確設(shè)置Cache-Control:no-cache,pragma:no-cache或Cache-Control:max-age=0瀏覽器不緩存時(shí)。