瀏覽器緩存是前端優(yōu)化的一個(gè)重要方向，通過緩存靜態(tài)資源，可以減少頁面的加載時(shí)間和減輕服務(wù)器負(fù)擔(dān)，提高用戶體驗(yàn)。本文將介紹瀏覽器緩存的基本原理和常見的緩存策略，并用 nodejs的 koa 框架下的代碼實(shí)現(xiàn)。

【資料圖】

緩存原理

瀏覽器緩存的基本原理是將靜態(tài)資源（如 CSS、JavaScript、圖片等）緩存到本地，當(dāng)頁面再次請求這些資源時(shí)，直接從本地獲取，而不是重新從服務(wù)器下載。這可以減少頁面的加載時(shí)間和減輕服務(wù)器負(fù)擔(dān)，提高用戶體驗(yàn)。

在 HTTP 協(xié)議中，瀏覽器緩存可以通過兩種機(jī)制實(shí)現(xiàn)：強(qiáng)緩存和協(xié)商緩存。【相關(guān)教程推薦：nodejs視頻教程】

強(qiáng)緩存

Expires字段：

Cache-Control（替代方案）

public：所有內(nèi)容都被緩存（客戶端和代理服務(wù)器都可被緩存）

private：只緩存到私有緩存中（客戶端）

no-cache：與服務(wù)端確認(rèn)返回的響應(yīng)是否被更改，然后才能使用該響應(yīng)來滿足后續(xù)對同一個(gè)網(wǎng)址的請求。因此，如果存在合適的驗(yàn)證令牌 (ETag)，no-cache 會發(fā)起往返通信來驗(yàn)證緩存的響應(yīng)，如果資源未被更改，可以避免下載。

no-store：值不緩存

must-revalidation/proxy-revalidation：如果緩存內(nèi)容失效，則請求必須發(fā)送到服務(wù)器已進(jìn)行重新驗(yàn)證

max-age=xxx：緩存內(nèi)容在xxx秒后失效，這個(gè)選項(xiàng)只能在http1.1使用，比last-Modified優(yōu)先級更高

last-Modified（上次修改日期）

last-Modified：保存于服務(wù)器中，記錄該資源上次修改的日期（不能精確到秒，如果在數(shù)秒內(nèi)多次修改，可能會導(dǎo)致錯(cuò)誤命中緩存）

if-modified-since：保存于客戶端中，請求被攜帶并與服務(wù)端的last-Modified比較，相同則直接命中緩存返回304狀態(tài)碼

koa實(shí)現(xiàn)強(qiáng)緩存

const Koa = require("koa");const app = new Koa();// 設(shè)置 expires方案const setExpires = async (ctx, next) => {  // 設(shè)置緩存時(shí)間為 1 分鐘  const expires = new Date(Date.now() + 60 * 1000);  ctx.set("Expires", expires.toUTCString());  await next();}// Cache-Control方案（優(yōu)先執(zhí)行）const setCacheControl = async (ctx, next) => {  // 設(shè)置緩存時(shí)間為 1 分鐘  ctx.set("Cache-Control", "public, max-age=60");  await next();}// Last-Modified方案const setLastModified = async (ctx, next) => {  // 獲取資源最后修改時(shí)間  const lastModified = new Date("2021-03-05T00:00:00Z");  // 設(shè)置 Last-Modified 頭  ctx.set("Last-Modified", lastModified.toUTCString());  await next();}const response = (ctx) => {  ctx.body = "Hello World";}// 跟Last-Modified方案相對應(yīng)const lastModifiedResponse = (ctx) => {  // 如果資源已經(jīng)修改過，則返回新的資源  if (ctx.headers["if-modified-since"] !== ctx.response.get("Last-Modified")) {    response(ctx)  } else ctx.status = 304;}app.get("/getMes", setExpires, response);app.listen(3000, () => console.log("Server started on port 3000"));

協(xié)商緩存（瀏覽器和服務(wù)器通過一個(gè)值進(jìn)行協(xié)商判斷）

Etag/if-None-Match

Last_Modified和if-Modified-Since

last-Modified：保存于服務(wù)器中，記錄該資源上次修改的日期（不能精確到秒，如果在數(shù)秒內(nèi)多次修改，可能會導(dǎo)致錯(cuò)誤命中緩存）

if-modified-since：保存于客戶端中，請求被攜帶并與服務(wù)端的last-Modified比較，相同則直接命中緩存返回304狀態(tài)碼

協(xié)商緩存ETag和Last-Modified區(qū)別：

ETag是服務(wù)器為資源分配的唯一標(biāo)識符，而 Last-Modified是服務(wù)器報(bào)告的資源的最后修改時(shí)間。

ETag可以使用任何算法生成，例如哈希，而 Last-Modified只能使用特定的時(shí)間格式（GMT）。

ETag的比較是強(qiáng)驗(yàn)證器（exact-match validator），需要完全匹配，而 Last-Modified的比較是弱驗(yàn)證器（weak validator），只需要在同一秒鐘內(nèi)相同即可。

ETag適用于所有類型的資源，而 Last-Modified只適用于不常更改的資源，例如圖片、視頻等。

對于經(jīng)常更新的資源，ETag 更適合，因?yàn)樗梢愿鼫?zhǔn)確地檢測資源是否已經(jīng)被修改；而對于不經(jīng)常更新的資源，Last-Modified 更適合，因?yàn)樗梢詼p少服務(wù)器負(fù)載和網(wǎng)絡(luò)流量。

koa實(shí)現(xiàn)協(xié)商緩存

const Koa = require("koa");const app = new Koa();// 設(shè)置 eTag方案const setExpires = async (ctx, next) => {  // 設(shè)置緩存時(shí)間為 1 分鐘  const maxAge = 60;  ctx.set("Cache-Control", `public, max-age=${maxAge}`);  // 設(shè)置 ETag 頭  const etag = "etag-123456789";  ctx.set("ETag", etag);  await next();}// Last-Modified方案const setLastModified = async (ctx, next) => {  // 設(shè)置緩存時(shí)間為 1 分鐘  const maxAge = 60;  ctx.set("Cache-Control", `public, max-age=${maxAge}`);  // 設(shè)置 Last-Modified 頭  const lastModified = new Date("2021-03-05T00:00:00Z");  ctx.set("Last-Modified", lastModified.toUTCString());  await next();}const response = (ctx) => {  ctx.body = "Hello World";}// 跟Etag方案對應(yīng)const etagResponse = (ctx) => {  // 如果 ETag 頭未被修改，則返回 304  if (ctx.headers["if-none-match"] === ctx.response.get("ETag")) {    ctx.status = 304;  } else ctx.body = "Hello World";}// 跟Last-Modified方案相對應(yīng)const lastModifiedResponse = (ctx) => {  // 如果資源已經(jīng)修改過，則返回新的資源  if (ctx.headers["if-modified-since"] !== ctx.response.get("Last-Modified")) {    response(ctx)  } else ctx.status = 304;}app.get("/getMes", setExpires, response);app.listen(3000, () => console.log("Server started on port 3000"));

koa使用哈希計(jì)算Etag值：

const Koa = require("koa");const crypto = require("crypto");const app = new Koa();// 假設(shè)這是要緩存的資源const content = "Hello, world!";app.use(async (ctx) => {  // 計(jì)算資源的哈希值  const hash = crypto.createHash("md5").update(content).digest("hex");  // 設(shè)置 ETag 頭  ctx.set("ETag", hash);  // 判斷客戶端是否發(fā)送了 If-None-Match 頭  const ifNoneMatch = ctx.get("If-None-Match");  if (ifNoneMatch === hash) {    // 如果客戶端發(fā)送了 If-None-Match 頭，并且與當(dāng)前資源的哈希值相同，則返回 304 Not Modified    ctx.status = 304;  } else {    // 如果客戶端沒有發(fā)送 If-None-Match 頭，或者與當(dāng)前資源的哈希值不同，則返回新的資源    ctx.body = content;  }});app.listen(3000);

緩存執(zhí)行流程：

強(qiáng)緩存未失效，從緩存中讀取數(shù)據(jù)，cache-control優(yōu)先級高于last-Modified

強(qiáng)緩存失效，執(zhí)行協(xié)商緩存，Etag的優(yōu)先級會高于last-Modified

緩存未失效服務(wù)器返回304狀態(tài)碼，客戶端從緩存中讀取數(shù)據(jù)

緩存已失效則返回資源和200狀態(tài)碼

強(qiáng)緩存和協(xié)商緩存的使用？

強(qiáng)緩存通常在瀏覽器中緩存靜態(tài)資源（如 CSS、JavaScript、圖片等），以減少頁面的加載時(shí)間和減輕服務(wù)器負(fù)擔(dān)。

協(xié)商緩存通常用于緩存動(dòng)態(tài)資源（如 HTML 頁面、API 數(shù)據(jù)等），以減少服務(wù)器的負(fù)擔(dān)和網(wǎng)絡(luò)帶寬的消耗。

在實(shí)際應(yīng)用中，強(qiáng)緩存和協(xié)商緩存可以單獨(dú)使用或一起使用。對于一些靜態(tài)資源，可以只使用強(qiáng)緩存；對于一些動(dòng)態(tài)資源，可以只使用協(xié)商緩存；對于一些經(jīng)常變化的資源，可以使用強(qiáng)緩存和協(xié)商緩存結(jié)合使用，既可以減少服務(wù)器的負(fù)擔(dān)，也可以保證及時(shí)獲取到最新的資源。

結(jié)語

雖然是用后端nodejs實(shí)現(xiàn)，但是我認(rèn)為前端也應(yīng)該多多少少了解一下這方面的知識，以便于后端更好的進(jìn)行交互。后面會講前端如何實(shí)現(xiàn)？

更多node相關(guān)知識，請?jiān)L問：nodejs 教程！

以上就是緩存是什么？用node怎么實(shí)現(xiàn)？的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： Node.js