前端必須要懂的瀏覽器緩存機(jī)制

作者：佚名 2017-09-28 12:03:40

本文詳細(xì)講解了瀏覽器端緩存的分類(lèi)：200 from cache和304 not modified；介紹了http1.1 header Cache-Control的max-age和http1.0 header Expires的區(qū)別；介紹了http1.1 header Etag、If-None-Match和http1.0 header Last-Modified、If-Modified-Since的區(qū)別。

1. 什么是瀏覽器緩存？

瀏覽器通常會(huì)將常用資源緩存在你的個(gè)人電腦的磁盤(pán)和內(nèi)存中。如Chrome瀏覽器的緩存存放位置就在： \Users\Your_Account\AppData\Local\Google\Chrome\User Data\Default 中的 Cache文件夾和 Media Cache 文件夾中。

2. 什么是靜態(tài)資源服務(wù)器？

在一般的網(wǎng)站中，靜態(tài)資源使用頻率高，流量占用大。對(duì)于訪(fǎng)問(wèn)量稍大的網(wǎng)站，都會(huì)把靜態(tài)資源放置到 CDN 服務(wù)器，不占用業(yè)務(wù)服務(wù)器的網(wǎng)絡(luò)帶寬，而達(dá)到更好的用戶(hù)體驗(yàn)。

3. 瀏覽器請(qǐng)求靜態(tài)資源的流程

對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，我們主要跟瀏覽器中的緩存打交道，上圖流程是簡(jiǎn)化版的;事實(shí)上在實(shí)際應(yīng)用中通常采用靜態(tài)資源服務(wù)器（CDN）。

4. 瀏覽器端緩存的分類(lèi)

下面這張圖展示了某一網(wǎng)站，對(duì)不同資源的請(qǐng)求結(jié)果，其中可以看到有的資源直接從緩存中讀取，有的資源跟服務(wù)器進(jìn)行了再驗(yàn)證，有的資源重新從服務(wù)器端獲取。

200 from cache
304 not modified

注意，我們討論的所有關(guān)于緩存資源的問(wèn)題，都僅僅針對(duì) GET 請(qǐng)求。而對(duì)于 POST , DELETE , PUT 這類(lèi)行為性操作通常不做任何緩存。

5. Cache-Control和Expires

Cache-Control是HTTP1.1中新增的響應(yīng)頭
Expires是HTTP1.0中的響應(yīng)頭
Cache-Control使用的是相對(duì)時(shí)間
Expires指定的是具體的過(guò)期日期而不是秒數(shù)。因?yàn)楹芏喾?wù)器跟客戶(hù)端存在時(shí)鐘不一致的情況，所以***還是使用Cache-Control.
Cache-Control和Expires同時(shí)使用的話(huà)，Cache-Control會(huì)覆蓋Expires

6. Cache-Control都可以設(shè)置哪些屬性

max-age（單位為s）

指定設(shè)置緩存***的有效時(shí)間，定義的是時(shí)間長(zhǎng)短。當(dāng)瀏覽器向服務(wù)器發(fā)送請(qǐng)求后，在max-age這段時(shí)間里瀏覽器就不會(huì)再向服務(wù)器發(fā)送請(qǐng)求了。

public

指定響應(yīng)可以在代理緩存中被緩存，于是可以被多用戶(hù)共享。如果沒(méi)有明確指定private，則默認(rèn)為public。

private

響應(yīng)只能在私有緩存中被緩存，不能放在代理緩存上。對(duì)一些用戶(hù)信息敏感的資源，通常需要設(shè)置為private。

no-cache

表示必須先與服務(wù)器確認(rèn)資源是否被更改過(guò)（依靠If-None-Match和Etag），然后再?zèng)Q定是否使用本地緩存。

no-store

絕對(duì)禁止緩存任何資源，也就是說(shuō)每次用戶(hù)請(qǐng)求資源時(shí)，都會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，每次都會(huì)下載完整的資源。通常用于機(jī)密性資源。

關(guān)于Cache-Control的使用，見(jiàn)下面這張圖

7.新鮮度限值

HTTP通過(guò)緩存將服務(wù)器資源的副本保留一段時(shí)間，這段時(shí)間稱(chēng)為新鮮度限值。這在一段時(shí)間內(nèi)請(qǐng)求相同資源不會(huì)再通過(guò)服務(wù)器。HTTP協(xié)議中Cache-Control 和 Expires可以用來(lái)設(shè)置新鮮度的限值，前者是HTTP1.1中新增的響應(yīng)頭，后者是HTTP1.0中的響應(yīng)頭。二者所做的事時(shí)都是相同的，但由于Cache-Control使用的是相對(duì)時(shí)間，而Expires可能存在客戶(hù)端與服務(wù)器端時(shí)間不一樣的問(wèn)題，所以我們更傾向于選擇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)
            //對(duì)主文檔設(shè)置緩存，無(wú)效果
            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)第二次訪(fǎng)問(wèn)頁(yè)面時(shí)，瀏覽器會(huì)直接從緩存中取得資源

8.服務(wù)器再驗(yàn)證

瀏覽器或代理緩存中緩存的資源過(guò)期了，并不意味著它和原始服務(wù)器上的資源有實(shí)際的差異，僅僅意味著到了要進(jìn)行核對(duì)的時(shí)間了。這種情況被稱(chēng)為服務(wù)器再驗(yàn)證。

如果資源發(fā)生變化，則需要取得新的資源，并在緩存中替換舊資源。
如果資源沒(méi)有發(fā)生變化，緩存只需要獲取新的響應(yīng)頭，和一個(gè)新的過(guò)期時(shí)間，對(duì)緩存中的資源過(guò)期時(shí)間進(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)識(shí)資源的狀態(tài)，由服務(wù)端產(chǎn)生。瀏覽器會(huì)將這串字符串傳回服務(wù)器，驗(yàn)證資源是否已經(jīng)修改，如果沒(méi)有修改，過(guò)程如下：

代碼示例

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)
            //對(duì)主文檔設(shè)置緩存，無(wú)效果
            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)客戶(hù)端請(qǐng)求時(shí)將它返回給客戶(hù)端
可以通過(guò)時(shí)間戳就可以最簡(jiǎn)單的得到ETag頭信息；但不建議這么做，這么做和Last-Modified頭信息就沒(méi)什么兩樣了
ETag值可以是唯一標(biāo)識(shí)資源的任何東西，如持久化存儲(chǔ)中的某個(gè)資源關(guān)聯(lián)的版本、一個(gè)或者多個(gè)文件屬性，實(shí)體頭信息和校驗(yàn)值、(CheckSum)，也可以計(jì)算實(shí)體信息的散列值。
有時(shí)候，為了計(jì)算一個(gè)ETag值可能有比較大的代價(jià)，此時(shí)可以采用生成唯一值等方式(如常見(jiàn)的GUID)。
Apache默認(rèn)通過(guò)FileEtag中FileEtag INode Mtime Size的配置自動(dòng)生成ETag(當(dāng)然也可以通過(guò)用戶(hù)自定義的方式)。
由于Etag由服務(wù)器構(gòu)造，所以在集群環(huán)境中一定要保證Etag的唯一性

11. If-Modified-Since與Last-Modified

這兩個(gè)是HTTP1.0中用來(lái)驗(yàn)證資源是否過(guò)期的請(qǐng)求/響應(yīng)頭，這兩個(gè)頭部都是日期，驗(yàn)證過(guò)程與Etag類(lèi)似，這里不詳細(xì)介紹。使用這兩個(gè)頭部來(lái)驗(yàn)證資源是否更新時(shí)，存在以下問(wèn)題：

有些文檔資源周期性的被重寫(xiě)，但實(shí)際內(nèi)容沒(méi)有改變。此時(shí)文件元數(shù)據(jù)中會(huì)顯示文件最近的修改日期與If-Modified-Since不相同，導(dǎo)致不必要的響應(yīng)。
有些文檔資源被修改了，但修改內(nèi)容并不重要，不需要所有的緩存都更新（比如代碼注釋?zhuān)?/li>

12. 總結(jié)

瀏覽器端緩存分為200 from cache和304 not modified
HTTP協(xié)議中Cache-Control 和 Expires可以用來(lái)設(shè)置新鮮度的限值，前者是HTTP1.1中新增的響應(yīng)頭，后者是HTTP1.0中的響應(yīng)頭。
max-age（單位為s）而Expires指定的是具體的過(guò)期日期而不是秒數(shù)
Cache-Control和Expires同時(shí)使用的話(huà)，Cache-Control會(huì)覆蓋Expires
客戶(hù)端不用關(guān)心ETag值如何產(chǎn)生，只要服務(wù)在資源狀態(tài)發(fā)生變更的情況下將ETag值發(fā)送給它就行
Apache默認(rèn)通過(guò)FileEtag中FileEtag INode Mtime Size的配置自動(dòng)生成ETag(當(dāng)然也可以通過(guò)用戶(hù)自定義的方式)。
ETag常與If-None-Match或者If-Match一起，由客戶(hù)端通過(guò)HTTP頭信息(包括ETag值)發(fā)送給服務(wù)端處理。
Last-Modified常與If-Modified-Since一起由客戶(hù)端將Last-Modified值包括在HTTP頭信息中發(fā)給服務(wù)端進(jìn)行處理。
有些文檔資源周期性的被重寫(xiě)，但實(shí)際內(nèi)容沒(méi)有改變。此時(shí)文件元數(shù)據(jù)中會(huì)顯示文件最近的修改日期與If-Modified-Since不相同，導(dǎo)致不必要的響應(yīng)。

13 demo

demo

責(zé)任編輯：張燕妮來(lái)源：推酷

前端