HTTP之强缓存和协商缓存

趁你还年轻

HTTP缓存.png

关于强缓存和协商缓存的理论知识和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
image
第二次请求:

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
  • 前端问答互助星球:t.zsxq.com/yBA2Biq

努力成为优秀前端工程师!
阅读 2.9k

趁你还年轻,做个优秀的前端工程师
努力成为优秀的前端工程师! 文章在微信公众号:大大大前端 同步更新,期待你的关注~
4k 声望
4.1k 粉丝
0 条评论
4k 声望
4.1k 粉丝
文章目录
宣传栏