前端技術優選 - 通過 Node.js 小示例學習瀏覽器緩存策略－鑽石舞台

戳藍字「前端技術優選」關注我們哦！

單純講一些理論性的東西可能會很難理解，本文結合一些 Node.js 小示例來學習瀏覽器緩存策略。

在後端為了加速服務的訪問速度，通常可以使用 Memcached、Redis 做數據緩存，那麼在瀏覽器端又有哪些緩存策略呢？

一、瀏覽器緩存幾個階段1. 強緩存策略

瀏覽器端發起請求之後不會直接向服務器請求數據，直接先到達強緩存階段，如果強緩存命中直接返回，如果沒有命中進入下一階段協商緩存策略。

2. 協商緩存策略

協商緩存是當強緩存沒有命中的情況或者按下 F5 鍵刷新頁面會觸發，它每次都會攜帶標識與服務器進行校驗，符合則返回 304 標識，表示資源沒有更新，如果協商緩存也失效了，進入下一個階段獲取最新數據，並返回且狀態碼為 200。

3. 存儲策略

當強緩存->協商緩存都未命中，請求會直接到達服務器，獲取最新資源設置緩存策略，進行返回。

二、強緩存

強緩存的實現分為 Expires、Cache-Control 兩個。

Expires

Expires 屬於 HTTP 1.0 時期的產物，在響應中進行設置，示例如下：

response.writeHead(200,{'Content-Type':'text/javascript','Expires':newDate('2020-03-2511:19:00'),});

設置成功運行 node expires.js 在 Response Headers 里可以看到如下信息：

Expires:WedMar25202011:19:00GMT+0800(GMT+08:00)

刷新兩次頁面，可以看到第二次 size 一欄返回了memory cache此時 Expires 緩存命中。

Expires 是參考的本地時間，如果修改本地時間，可能就會造成緩存失效。

Cache-Control

Cache-Control 屬於 HTTP 1.1 時代的產物，可以再請求頭或者響應頭中設置，它的取值包含如下選項：

可緩存性

public：http 經過的任何地方都可以進行緩存（代理服務器也可緩存）

private：只有發起請求的這個瀏覽器才可以進行緩存，如果設置了代理緩存，那麼代理緩存是不會生效的

no-cache：任何一個節點都不可以緩存（繞過強緩存，但是還會經過協商緩存）

到期

max-age=：設置緩存到多少秒過期

s-maxage=：會代替 max-age，只有在代理服務器（nginx 代理服務器）才會生效

max-stale=：是發起請求方主動帶起的一個頭，是代表即便緩存過期，但是在 max-stale 這個時間內還可以使用過期的緩存，而不需要向服務器請求新的內容

重新驗證

must-revalidate：如果 max-age 設置的內容過期，必須要向服務器請求重新獲取數據驗證內容是否過期

proxy-revalidate：主要用在緩存服務器，指定緩存服務器在過期後重新從原服務器獲取，不能從本地獲取

其它

no-store：本地和代理服務器都不可以存儲這個緩存，永遠都要從服務器拿 body 新的內容使用（強緩存、協商緩存都不會經過）

no-transform：主要用於 proxy 服務器，告訴代理服務器不要隨意改動返回的內容

Cache-Control 示例

先思考兩個問題?

在頁面中引入靜態資源文件，為什麼靜態資源文件改變後，再次發起請求還是之前的內容，沒有變化呢？

在使用webpack等一些打包工具時，為什麼要加上一串hash碼？

cache-control.html

<html><head><metacharset="utf-8"/><title>cache-control</title></head><body><scriptsrc="/script.js"></script></body></html>

cache-control.js

瀏覽器輸入 http://localhost:3010/ 加載 cache-control.html 文件，該文件會請求 http://localhost:3010/script.js 如果 url 等於 /script.js 設置 cache-control 的 max-age 進行瀏覽器緩存。

consthttp=require('http');constfs=require('fs');constport=3010;http.createServer((request,response)=>{console.log('requesturl:',request.url);if(request.url==='/'){consthtml=fs.readFileSync('./example/cache/cache-control.html','utf-8');response.writeHead(200,{'Content-Type':'text/html',});response.end(html);}elseif(request.url==='/script.js'){response.writeHead(200,{'Content-Type':'text/javascript','Cache-Control':'max-age=200'});response.end("console.log('scriptload')");}}).listen(port);console.log('serverlisteningonport',port);

第一次運行

瀏覽器運行結果,沒有什麼問題，正常響應

控制台運行結果

修改 cache-control.js 返回值

...response.writeHead(200,{'Content-Type':'text/javascript','Cache-Control':'max-age=200'});response.end("console.log('script load ！！！')");...

中斷上次程序，第二次運行

瀏覽器運行結果

第二次運行，從 memory cahce 讀取，瀏覽器控制台並沒有打印修改過的內容

控制台運營結果

只請求了/並沒有請求/script.js

源碼參考：github.com/Q-Angelo/http-protocol/blob/master/example/cache/cache-control.js

以上結果瀏覽器並沒有返回給我們服務端修改的結果，這是為什麼呢？

先回答第一個問題

在頁面中引入靜態資源文件，為什麼靜態資源文件改變後，再次發起請求還是之前的內容，沒有變化呢？

是因為我們請求的 url/script.js沒有變，那麼瀏覽器就不會經過服務端的驗證，會直接從客戶端緩存去讀，就會導致一個問題，我們的js靜態資源更新之後，不會立即更新到我們的客戶端，這也是前端開發中常見的一個問題，我們是希望瀏覽器去緩存我們的靜態資源文件（js、css、img等）我們也不希望服務端內容更新了之後客戶端還是請求的緩存的資源，

回答第二個問題

在使用webpack等一些打包工具時，為什麼要加上一串hash碼？

解決辦法也就是我們在做 js 構建流程時，把打包完成的 js 文件名上根據它內容 hash 值加上一串 hash 碼，這樣你的 js 文件或者 css 文件等內容不變，這樣生成的 hash 碼就不會變，反映到頁面上就是你的 url 沒有變，如果你的文件內容有變化那麼嵌入到頁面的文件 url 就會發生變化，這樣就可以達到一個更新緩存的目的，這也是目前前端來說比較常見的一個靜態資源方案。

Expires 與 Cache-Control 對比

HTTP 協議對比：Expires 屬於 HTTP 1.0 時代的產物，Cache-Control 屬於 HTTP 1.1 時代的產物

優先級對比：如果同時使用 Cache-Control 的 max-age 與 Expires，則 max-age 優先級會更高，會忽略掉 Expires

緩存單位：Expires 與 Cache-Control 兩者的緩存單位都是以時間為維度，如果我要根據文件的內容變化來判斷緩存是否失效怎麼辦呢？就需要用到下面的協商緩存了。

三、協商緩存

如果強緩存未命中或用戶按下 F5 強制刷新後進入協商緩存，服務器則根據瀏覽器請求時的標識進行判斷，如果協商緩存生效返回 304 否則返回 200。協商緩存的實現也是基於兩點 Last-Modified、ETag 這個需要在 HTTP Headers 中設置。

Last-Modified/If-Modified-Since

Last-Modified 是在服務端設置進行響應，If-Modified-Since 是在瀏覽器端根據服務端上次在 Response Headers 中設置的 Last-Modified 取其值，如果存在請求時設置其 Request Headers 值 If-Modified-Since 傳到服務器，服務器也是拿到這個值進行比對，下面為核心實現。

if(request.url==='/script.js'){constfilePath=path.join(__dirname,request.url);//拼接當前腳本文件地址conststat=fs.statSync(filePath);//獲取當前腳本狀態constmtime=stat.mtime.toGMTString()//文件的最後修改時間constrequestMtime=request.headers['if-modified-since'];//來自瀏覽器傳遞的值console.log(stat);console.log(mtime,requestMtime);//走協商緩存if(mtime===requestMtime){response.statusCode=304;response.end();return;}//協商緩存失效，重新讀取數據設置Last-Modified響應頭console.log('協商緩存Last-Modified失效');response.writeHead(200,{'Content-Type':'text/javascript','Last-Modified':mtime,});constreadStream=fs.createReadStream(filePath);readStream.pipe(response);}

執行 node last-modified.js 啟動程序，瀏覽器執行 http://localhost:3010/ 打開頁面，我多次調用發現第一次是從服務器拿的數據且狀態為 200，之後每次都是 memory cache 為什麼不是 304 呢？

源碼地址 github.com/Q-Angelo/http-protocol/tree/master/example/cache/last-modified

顯然是強緩存生效了，你可能會想我沒有設置強緩存哦😯

這是因為瀏覽器默認啟用了一個啟發式緩存，這在設置了 Last-Modified 響應頭且沒有設置 Cache-Control: max-age/s-maxage 或 Expires 時會觸發，它的一個緩存時間是用 Date - Last-Modified 的值的 10% 作為緩存時間。

現在我們要達到 304 的效果，不走強緩存直接走協商緩存，修改我們的響應，設置 Cache-Control=max-age=0 修改如下：

response.writeHead(200,{'Content-Type':'text/javascript','Last-Modified':mtime,'Cache-Control':'max-age=0',//修改地方});

再次運行我們的程序，控制台執行 node last-modified-max-age.js 再次重新打開頁面查看效果，第二次直接走的協商緩存且 Request Headers 攜帶了 If-Modified-Since: Wed, 25 Mar 2020 12:31:58 GMT

源碼地址 https://github.com/Q-Angelo/http-protocol/tree/master/example/cache/last-modified-max-age

ETag 和 If-None-Match

Last-Modified 是以文件的修改時間來判斷，Etag 是根據文件的內容是否修改來判斷，如果 Etag 有修改重新獲取新的資源返回，如果未修改返回 304 通知客戶端使用本地緩存。

Etag 的判斷主要也是在服務端通過一種 Hash 算法實現，核心實現如下：

if(request.url==='/script.js'){constfilePath=path.join(__dirname,request.url);//拼接當前腳本文件地址constbuffer=fs.readFileSync(filePath);//獲取當前腳本狀態constfileMd5=md5(buffer);//文件的md5值constnoneMatch=request.headers['if-none-match'];//來自瀏覽器端傳遞的值if(noneMatch===fileMd5){response.statusCode=304;response.end();return;}console.log('Etag緩存失效');response.writeHead(200,{'Content-Type':'text/javascript','Cache-Control':'max-age=0','ETag':fileMd5,});constreadStream=fs.createReadStream(filePath);readStream.pipe(response);}

源碼地址 github.com/Q-Angelo/http-protocol/tree/master/example/cache/etag

node etag.js 運行我們程序，打開我們的頁面多次訪問，第二次會看到瀏覽器會攜帶一個 If-None-Match 的 Header 頭傳遞到服務端進行校驗，當前協商緩存命中了所以響應狀態為 304