前端必須要懂的瀏覽器緩存機(jī)制
1. 什么是瀏覽器緩存？
瀏覽器通常會將常用資源緩存在你的個人電腦的磁盤和內(nèi)存中。如Chrome瀏覽器的緩存存放位置就在： \Users\Your_Account\AppData\Local\Google\Chrome\User Data\Default 中的 Cache文件夾和 Media Cache 文件夾中。
2. 什么是靜態(tài)資源服務(wù)器？
在一般的網(wǎng)站中，靜態(tài)資源使用頻率高，流量占用大。對于訪問量稍大的網(wǎng)站，都會把靜態(tài)資源放置到 CDN 服務(wù)器，不占用業(yè)務(wù)服務(wù)器的網(wǎng)絡(luò)帶寬，而達(dá)到更好的用戶體驗(yàn)。
3. 瀏覽器請求靜態(tài)資源的流程
對于前端開發(fā)者來說，我們主要跟瀏覽器中的緩存打交道，上圖流程是簡化版的;事實(shí)上在實(shí)際應(yīng)用中通常采用靜態(tài)資源服務(wù)器（CDN）。
4. 瀏覽器端緩存的分類
下面這張圖展示了某一網(wǎng)站，對不同資源的請求結(jié)果，其中可以看到有的資源直接從緩存中讀取，有的資源跟服務(wù)器進(jìn)行了再驗(yàn)證，有的資源重新從服務(wù)器端獲取。
- 200 from cache
- 304 not modified
注意，我們討論的所有關(guān)于緩存資源的問題，都僅僅針對 GET 請求。而對于 POST , DELETE , PUT 這類行為性操作通常不做任何緩存。
5. Cache-Control和Expires
- Cache-Control是HTTP1.1中新增的響應(yīng)頭
- Expires是HTTP1.0中的響應(yīng)頭
- Cache-Control使用的是相對時間
- Expires指定的是具體的過期日期而不是秒數(shù)。因?yàn)楹芏喾?wù)器跟客戶端存在時鐘不一致的情況，所以***還是使用Cache-Control.
- Cache-Control和Expires同時使用的話，Cache-Control會覆蓋Expires
6. Cache-Control都可以設(shè)置哪些屬性
- max-age（單位為s）
指定設(shè)置緩存***的有效時間，定義的是時間長短。當(dāng)瀏覽器向服務(wù)器發(fā)送請求后，在max-age這段時間里瀏覽器就不會再向服務(wù)器發(fā)送請求了。
- public
指定響應(yīng)可以在代理緩存中被緩存，于是可以被多用戶共享。如果沒有明確指定private，則默認(rèn)為public。
- private
響應(yīng)只能在私有緩存中被緩存，不能放在代理緩存上。對一些用戶信息敏感的資源，通常需要設(shè)置為private。
- no-cache
表示必須先與服務(wù)器確認(rèn)資源是否被更改過（依靠If-None-Match和Etag），然后再決定是否使用本地緩存。
- no-store
絕對禁止緩存任何資源，也就是說每次用戶請求資源時，都會向服務(wù)器發(fā)送一個請求，每次都會下載完整的資源。通常用于機(jī)密性資源。
關(guān)于Cache-Control的使用，見下面這張圖
7.新鮮度限值
HTTP通過緩存將服務(wù)器資源的副本保留一段時間，這段時間稱為新鮮度限值。這在一段時間內(nèi)請求相同資源不會再通過服務(wù)器。HTTP協(xié)議中Cache-Control 和 Expires可以用來設(shè)置新鮮度的限值，前者是HTTP1.1中新增的響應(yīng)頭，后者是HTTP1.0中的響應(yīng)頭。二者所做的事時都是相同的，但由于Cache-Control使用的是相對時間，而Expires可能存在客戶端與服務(wù)器端時間不一樣的問題，所以我們更傾向于選擇Cache-Control。
html代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<title>Web Cache</title>
<link rel="shortcut icon" href="./shortcut.png">
<script>
</script>
</head>
<body class="claro">
<img src="./cache.png">
</body>
</html>
node服務(wù)端代碼
var http = require('http');
var fs = require('fs');
http.createServer(function(req, res) {
if (req.url === '/' || req.url === '' || req.url === '/index.html') {
fs.readFile('./index.html', function(err, file) {
console.log(req.url)
//對主文檔設(shè)置緩存，無效果
res.setHeader('Cache-Control', "no-cache, max-age=" + 5);
res.setHeader('Content-Type', 'text/html');
res.writeHead('200', "OK");
res.end(file);
});
}
if (req.url === '/cache.png') {
fs.readFile('./cache.png', function(err, file) {
res.setHeader('Cache-Control', "max-age=" + 5);//緩存五秒
res.setHeader('Content-Type', 'images/png');
res.writeHead('200', "Not Modified");
res.end(file);
});
}
}).listen(8888);
當(dāng)在5秒內(nèi)第二次訪問頁面時，瀏覽器會直接從緩存中取得資源
8.服務(wù)器再驗(yàn)證
瀏覽器或代理緩存中緩存的資源過期了，并不意味著它和原始服務(wù)器上的資源有實(shí)際的差異，僅僅意味著到了要進(jìn)行核對的時間了。這種情況被稱為服務(wù)器再驗(yàn)證。
- 如果資源發(fā)生變化，則需要取得新的資源，并在緩存中替換舊資源。
- 如果資源沒有發(fā)生變化，緩存只需要獲取新的響應(yīng)頭，和一個新的過期時間，對緩存中的資源過期時間進(jìn)行更新即可。
HTTP1.1推薦使用的驗(yàn)證方式是If-None-Match/Etag，在HTTP1.0中則使用If-Modified-Since/Last-Modified。
9.Etag與If-None-Match
Etag是指根據(jù)實(shí)體內(nèi)容生成一段hash字符串，標(biāo)識資源的狀態(tài)，由服務(wù)端產(chǎn)生。瀏覽器會將這串字符串傳回服務(wù)器，驗(yàn)證資源是否已經(jīng)修改，如果沒有修改，過程如下：
代碼示例
var http = require('http');
var fs = require('fs');
http.createServer(function(req, res) {
if (req.url === '/' || req.url === '' || req.url === '/index.html') {
fs.readFile('./index.html', function(err, file) {
console.log(req.url)
//對主文檔設(shè)置緩存，無效果
res.setHeader('Cache-Control', "no-cache, max-age=" + 5);
res.setHeader('Content-Type', 'text/html');
res.writeHead('200', "OK");
res.end(file);
});
}
if (req.url === '/shortcut.png') {
fs.readFile('./shortcut.png', function(err, file) {
console.log(req.url)
res.setHeader('Content-Type', 'images/png');
res.writeHead('200', "OK");
res.end(file);
})
}
if (req.url === '/cache.png') {
fs.readFile('./cache.png', function(err, file) {
console.log(req.headers);
console.log(req.url)
if (!req.headers['if-none-match']) {
res.setHeader('Cache-Control', "max-age=" + 5);
res.setHeader('Content-Type', 'images/png');
res.setHeader('Etag', "ffff");
res.writeHead('200', "Not Modified");
res.end(file);
} else {
if (req.headers['if-none-match'] === 'ffff') {
res.writeHead('304', "Not Modified");
res.end();
} else {
res.setHeader('Cache-Control', "max-age=" + 5);
res.setHeader('Content-Type', 'images/png');
res.setHeader('Etag', "ffff");
res.writeHead('200', "Not Modified");
res.end(file);
}
}
});
}
}).listen(8888)
10.如何計(jì)算Etag值
- ETag值通常由服務(wù)器端計(jì)算，并在響應(yīng)客戶端請求時將它返回給客戶端
- 可以通過時間戳就可以最簡單的得到ETag頭信息；但不建議這么做，這么做和Last-Modified頭信息就沒什么兩樣了
- ETag值可以是唯一標(biāo)識資源的任何東西，如持久化存儲中的某個資源關(guān)聯(lián)的版本、一個或者多個文件屬性，實(shí)體頭信息和校驗(yàn)值、(CheckSum)，也可以計(jì)算實(shí)體信息的散列值。
- 有時候，為了計(jì)算一個ETag值可能有比較大的代價，此時可以采用生成唯一值等方式(如常見的GUID)。
- Apache默認(rèn)通過FileEtag中FileEtag INode Mtime Size的配置自動生成ETag(當(dāng)然也可以通過用戶自定義的方式)。
- 由于Etag由服務(wù)器構(gòu)造，所以在集群環(huán)境中一定要保證Etag的唯一性
11. If-Modified-Since與Last-Modified
這兩個是HTTP1.0中用來驗(yàn)證資源是否過期的請求/響應(yīng)頭，這兩個頭部都是日期，驗(yàn)證過程與Etag類似，這里不詳細(xì)介紹。使用這兩個頭部來驗(yàn)證資源是否更新時，存在以下問題：
- 有些文檔資源周期性的被重寫，但實(shí)際內(nèi)容沒有改變。此時文件元數(shù)據(jù)中會顯示文件最近的修改日期與If-Modified-Since不相同，導(dǎo)致不必要的響應(yīng)。
- 有些文檔資源被修改了，但修改內(nèi)容并不重要，不需要所有的緩存都更新（比如代碼注釋）
12. 總結(jié)
- 瀏覽器端緩存分為200 from cache和304 not modified
- HTTP協(xié)議中Cache-Control 和 Expires可以用來設(shè)置新鮮度的限值，前者是HTTP1.1中新增的響應(yīng)頭，后者是HTTP1.0中的響應(yīng)頭。
- max-age（單位為s）而Expires指定的是具體的過期日期而不是秒數(shù)
- Cache-Control和Expires同時使用的話，Cache-Control會覆蓋Expires
- 客戶端不用關(guān)心ETag值如何產(chǎn)生，只要服務(wù)在資源狀態(tài)發(fā)生變更的情況下將ETag值發(fā)送給它就行
- Apache默認(rèn)通過FileEtag中FileEtag INode Mtime Size的配置自動生成ETag(當(dāng)然也可以通過用戶自定義的方式)。
- ETag常與If-None-Match或者If-Match一起，由客戶端通過HTTP頭信息(包括ETag值)發(fā)送給服務(wù)端處理。
- Last-Modified常與If-Modified-Since一起由客戶端將Last-Modified值包括在HTTP頭信息中發(fā)給服務(wù)端進(jìn)行處理。
- 有些文檔資源周期性的被重寫，但實(shí)際內(nèi)容沒有改變。此時文件元數(shù)據(jù)中會顯示文件最近的修改日期與If-Modified-Since不相同，導(dǎo)致不必要的響應(yīng)。
13 demo
demo
