HTTP進階，實戰(zhàn)剖析強緩存和協(xié)商緩存！

HTTP之強緩存和協(xié)商緩存

關于強緩存和協(xié)商緩存的理論知識和express.js下的實踐，政采云前端團隊的這篇文章已經(jīng)非常詳盡了：圖解 HTTP 緩存

強緩存和協(xié)商緩存流程圖

圖來自圖解 HTTP 緩存

剛好我最近也在對這一塊的內(nèi)容做補充和總結(jié)，受到這篇優(yōu)質(zhì)博文的啟發(fā)，于是有了這篇博文。

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

• 強緩存和協(xié)商緩存需要注意的細節(jié)
• HTTP 強緩存和協(xié)商緩存之 Koa 實戰(zhàn)
• Expires, Pragma, Cache-Control
• If-Modified-Since&&Last-Modified
• If-None-Match&&ETag

強緩存和協(xié)商緩存需要注意的細節(jié)

報文頭類型

報文頭優(yōu)先級

強緩存：Pragma >?Cache-Control > Expires

協(xié)商緩存：If-None-Match/ETag > If-Modified-Since/Last Modified

如果強緩存是新鮮的，優(yōu)先強緩存。

如果強緩存是不新鮮的，判斷有無協(xié)商緩存：

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

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

若資源沒有更新，狀態(tài)碼為304走瀏覽器緩存；若為200，走協(xié)商緩存，返回更新后的資源。

HTTP 強緩存和協(xié)商緩存之 Koa 實戰(zhàn)

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協(xié)商緩存之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協(xié)商緩存之If-None-Match&&ETag";
});

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

首次請求：

第二次請求來自協(xié)商緩存：