HTTP之強緩存和協商緩存

關於強緩存和協商緩存的理論知識和express.js下的實踐，政採雲前端團隊的這篇文章已經很是詳盡了：圖解 HTTP 緩存

強緩存和協商緩存流程圖

圖來自圖解 HTTP 緩存

恰好我最近也在對這一塊的內容作補充和總結，受到這篇優質博文的啓發，因而有了這篇博文。

那麼在這篇博文中會看到什麼呢？

• 強緩存和協商緩存須要注意的細節
• HTTP 強緩存和協商緩存之 Koa 實戰
  • Expires,Cache-Control,Pragma
  • If-Modified-Since&&Last-Modified
  • If-None-Match&&ETag

強緩存和協商緩存須要注意的細節

報文頭類型

報文頭	請求頭	響應頭
Expires	否	是
Pragma	是	是
Cache-Control	是	是
If-Match/If-None-Match	是	否
ETag	否	是
If-Modified-Since	是	否
Last-Modified	否	是

報文頭優先級

強緩存：Pragma > Cache-Control > Expires

協商緩存：If-None-Match/ETag > If-Modified-Since/Last Modified

若是強緩存是新鮮的，優先強緩存。

若是強緩存是不新鮮的，判斷有無協商緩存：

若上一次請求中有ETag，在If-None-Match帶上ETag value；

若上一次請求中沒有ETag，判斷上一次請求響應中是否有Last-Modified，在If-Modified-Since中帶上Last-Modified value；
複製代碼

若資源沒有更新，狀態碼爲304走瀏覽器緩存；若爲200，走協商緩存，返回更新後的資源。

HTTP 強緩存和協商緩存之 Koa 實戰

Expires

代碼：

const Koa = require("koa");
const app = new Koa();

app.use((ctx) => {
  ctx.body = "HTTP強緩存之Expires";
  ctx.set("Expires", "Mon, May 11 2020 22:10:14 GMT");
});

app.listen(3000);
console.log("應用運行在localhost:3000");
複製代碼

首次請求：

第二次請求來自強緩存：

Cache-Control

代碼：

const Koa = require("koa");
const app = new Koa();

app.use((ctx) => {
  ctx.body = "HTTP強緩存之Cache-Control";
  ctx.set("Cache-Control", "public,max-age=60");
});

app.listen(3000);
console.log("應用運行在localhost:3000");
複製代碼

首次請求：

第二次請求來自強緩存：

Pragma

代碼：

const Koa = require("koa");
const app = new Koa();

app.use((ctx) => {
  ctx.body = "HTTP強緩存之Pragma";
  ctx.set("Pragma", "no-cache");
});

app.listen(3000);
console.log("應用運行在localhost:3000");
複製代碼

首次請求： Pragma

第二次請求：

If-Modified-Since&&Last-Modified

代碼：

const Koa = require("koa");
const app = new Koa();

app.use((ctx) => {
  ctx.body = "HTTP協商緩存之If-Modified-Since&&Last-Modified";
  ctx.set({
    "Last-Modified": "Mon, May 11 2020 22:20:14 GMT",
  });
});

app.listen(3000);
console.log("應用運行在localhost:3000");
複製代碼

第一次請求：

第二次請求：

If-None-Match&&ETag

代碼：

const conditional = require("koa-conditional-get");
const etag = require("koa-etag");
const Koa = require("koa");
const app = new Koa();

app.use(conditional());
app.use(etag());

app.use((ctx) => {
  ctx.body = "HTTP協商緩存之If-None-Match&&ETag";
});

app.listen(3000);
console.log("應用運行在localhost:3000");
複製代碼

首次請求：

第二次請求來自協商緩存：

期待和你們交流，共同進步，歡迎你們加入我建立的與前端開發密切相關的技術討論小組：

• 微信公衆號： 生活在瀏覽器裏的咱們 / excellent_developers
• Github博客: 趁你還年輕233的我的博客
• SegmentFault專欄：趁你還年輕，作個優秀的前端工程師
• Leetcode討論微信羣：Z2Fva2FpMjAxMDA4MDE=（加我微信拉你進羣）

努力成爲優秀前端工程師！