前端必需要懂的瀏覽器緩存機制

時間 2019-11-25

原文原文鏈接

前端必需要懂的瀏覽器緩存機制

左鵬飛 2017.09.25html

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

1. 什麼是瀏覽器緩存？

瀏覽器一般會將經常使用資源緩存在你的我的電腦的磁盤和內存中。如Chrome瀏覽器的緩存存放位置就在：\Users\Your_Account\AppData\Local\Google\Chrome\User Data\Default中的Cache文件夾和Media Cache文件夾中。node

2. 什麼是靜態資源服務器？

在通常的網站中，靜態資源使用頻率高，流量佔用大。對於訪問量稍大的網站，都會把靜態資源放置到 CDN 服務器，不佔用業務服務器的網絡帶寬，而達到更好的用戶體驗。git

3. 瀏覽器請求靜態資源的流程

對於前端開發者來講，咱們主要跟瀏覽器中的緩存打交道，上圖流程是簡化版的;事實上在實際應用中一般採用靜態資源服務器（CDN）。github

4. 瀏覽器端緩存的分類

下面這張圖展現了某一網站，對不一樣資源的請求結果，其中能夠看到有的資源直接從緩存中讀取，有的資源跟服務器進行了再驗證，有的資源從新從服務器端獲取。web

200 from cache
304 not modified

注意，咱們討論的全部關於緩存資源的問題，都僅僅針對GET請求。而對於POST, DELETE, PUT這類行爲性操做一般不作任何緩存。瀏覽器

5. Cache-Control和Expires

Cache-Control是HTTP1.1中新增的響應頭
Expires是HTTP1.0中的響應頭
Cache-Control使用的是相對時間
Expires指定的是具體的過時日期而不是秒數。由於不少服務器跟客戶端存在時鐘不一致的狀況，因此最好仍是使用Cache-Control.
Cache-Control和Expires同時使用的話，Cache-Control會覆蓋Expires

6. Cache-Control均可以設置哪些屬性

max-age（單位爲s）

指定設置緩存最大的有效時間，定義的是時間長短。當瀏覽器向服務器發送請求後，在max-age這段時間裏瀏覽器就不會再向服務器發送請求了。緩存

public

指定響應能夠在代理緩存中被緩存，因而能夠被多用戶共享。若是沒有明確指定private，則默認爲public。服務器

private

響應只能在私有緩存中被緩存，不能放在代理緩存上。對一些用戶信息敏感的資源，一般須要設置爲private。網絡

no-cache

表示必須先與服務器確認資源是否被更改過（依靠If-None-Match和Etag），而後再決定是否使用本地緩存。

no-store

絕對禁止緩存任何資源，也就是說每次用戶請求資源時，都會向服務器發送一個請求，每次都會下載完整的資源。一般用於機密性資源。

關於Cache-Control的使用，見下面這張圖

7.新鮮度限值

HTTP經過緩存將服務器資源的副本保留一段時間，這段時間稱爲新鮮度限值。這在一段時間內請求相同資源不會再經過服務器。HTTP協議中Cache-Control 和 Expires能夠用來設置新鮮度的限值，前者是HTTP1.1中新增的響應頭，後者是HTTP1.0中的響應頭。兩者所作的事時都是相同的，但因爲Cache-Control使用的是相對時間，而Expires可能存在客戶端與服務器端時間不同的問題，因此咱們更傾向於選擇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> <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服務端代碼

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) //對主文檔設置緩存，無效果 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); 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) //對主文檔設置緩存，無效果 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);

當在5秒內第二次訪問頁面時，瀏覽器會直接從緩存中取得資源

8.服務器再驗證

瀏覽器或代理緩存中緩存的資源過時了，並不意味着它和原始服務器上的資源有實際的差別，僅僅意味着到了要進行覈對的時間了。這種狀況被稱爲服務器再驗證。

若是資源發生變化，則須要取得新的資源，並在緩存中替換舊資源。
若是資源沒有發生變化，緩存只須要獲取新的響應頭，和一個新的過時時間，對緩存中的資源過時時間進行更新便可。

HTTP1.1推薦使用的驗證方式是If-None-Match/Etag，在HTTP1.0中則使用If-Modified-Since/Last-Modified。

9.Etag與If-None-Match

Etag是指根據實體內容生成一段hash字符串，標識資源的狀態，由服務端產生。瀏覽器會將這串字符串傳回服務器，驗證資源是否已經修改，若是沒有修改，過程以下：

代碼示例

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) //對主文檔設置緩存，無效果 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) 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) //對主文檔設置緩存，無效果 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.如何計算Etag值

ETag值一般由服務器端計算，並在響應客戶端請求時將它返回給客戶端
能夠經過時間戳就能夠最簡單的獲得ETag頭信息；但不建議這麼作，這麼作和Last-Modified頭信息就沒什麼兩樣了
ETag值能夠是惟一標識資源的任何東西，如持久化存儲中的某個資源關聯的版本、一個或者多個文件屬性，實體頭信息和校驗值、(CheckSum)，也能夠計算實體信息的散列值。
有時候，爲了計算一個ETag值可能有比較大的代價，此時能夠採用生成惟一值等方式(如常見的GUID)。
Apache默認經過FileEtag中FileEtag INode Mtime Size的配置自動生成ETag(固然也能夠經過用戶自定義的方式)。
因爲Etag由服務器構造，因此在集羣環境中必定要保證Etag的惟一性