瀏覽器緩存小結

一. 分類

1. 瀏覽器的緩存，從狀態碼來看一共有兩種

• 304：確認沒有修改
• 200：不發請求，直接讀取緩存

1. 從設置方式來看，有四種（暫不考慮Service Worker）

• maxAge
• Application Cache
• Last-Modified/If-Modified-Since
• Etag/If-None-Match

maxAge

• 設置方法：

var expires = new Date();
var maxAge = 60*60*24*365;
expires.setTime(expires.getTime() + maxAge * 1000);
response.setHeader("Expires", expires.toUTCString());
response.setHeader("Cache-Control", "max-age=" + maxAge);

• 說明：

瀏覽器在發送請求以前因爲檢測到Cache-Control和Expires（Cache-Control的優先級高於Expires，但有的瀏覽器不支持Cache-Control，這時採用Expires）， 若是沒有過時，則不會發送請求，而直接從緩存中讀取文件。
Cache-Control與Expires的做用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數據仍是從新發請求到服務器取數據。 只不過Cache-Control的選擇更多，設置更細緻，若是同時設置的話，其優先級高於Expires。

• 備註：

chrome中只有經過連接跳轉訪問才能夠，f5是無論用的，'Cache-Control' is always set to 'max-age=0′

Application Cache

由於大量的bug已經不建議使用，略

Last-Modified/If-Modified-Since

• 設置方法

fs.stat(realPath, function (err, stat) {
    var lastModified = stat.mtime.toUTCString();
    var ifModifiedSince = "If-Modified-Since".toLowerCase();
    response.setHeader("Last-Modified", lastModified);
    if (request.headers[ifModifiedSince] && lastModified == request.headers[ifModifiedSince]) {
    response.writeHead(304, "Not Modified");
    response.end();
    }
})

• 說明：

response 設置Last-Modified頭，request便會帶上If-Modified-Since頭，
須要手動比較，並返回304

• 備註

Last-Modified標註的最後修改只能精確到秒級；
有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形。

Etag/If-None-Match

• 設置方法

var hash = crypto.createHash('md5').update(file).digest('base64');
response.setHeader("Etag", hash);
if (request.headers['if-none-match'] && request.headers['if-none-match'] === hash) {
    response.writeHead(304, "Not Modified");
    response.end();
    return;
}

• 說明：

response設置Etag頭，request便會自動帶上if-none-match頭；
須要手動比較，並返回304
適用於文件更新，可是內容並無修改的狀況，好比目前前端的打包。

流程圖

graph TB 
    start(瀏覽器請求) -->  hasAppcache{appcache?}
    hasAppcache -- YES --> 200cache[200 從緩存讀取]
    hasAppcache -- NO --> ce{Cache-Control/Expires</br>是否有效}
    ce -- YES --> 200cache
    ce -- NO --> etag{has Etag?}
    etag -- YES --> ifNoMatch[向服務器請求帶if-None-Match] 
    etag -- NO --> lastModify{has Last-modified?}
    lastModify -- YES --> hasLastModify[向服務器請求帶if-Modified-Since]
    lastModify == NO ==> 200server[200 從服務器讀取]
    ifNoMatch --> match{match?}
    match -. YES .-> 304cache[304 從緩存讀取]
    match == NO ==> 200server
    hasLastModify --> lessThenModifiedSince{lastModified</br><=</br>ifModifiedSince?}
    lessThenModifiedSince -. YES .-> 304cache
    lessThenModifiedSince == NO ==> 200server

參考文章 https://github.com/etoah/BrowserCachePolicy