HTTP之强缓存和协商缓存

关于强缓存和协商缓存的理论知识和express.js下的实践，政采云前端团队的这篇文章已经非常详尽了：图解 HTTP 缓存强缓存和协商缓存流程图

图来自图解 HTTP 缓存刚好我最近也在对这一块的内容做补充和总结，受到这篇优质博文的启发，于是有了这篇博文那么在这篇博文中会看到什么呢？强缓存和协商缓存需要注意的细节HTTP 强缓存和协商缓存之 Koa 实战。

Expires,Cache-Control,PragmaIf-Modified-Since&&Last-ModifiedIf-None-Match&&ETag强缓存和协商缓存需要注意的细节报文头类型报文头

请求头响应头报文头优先级强缓存：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_developersGithub博客: 趁你还年轻233的个人博客

SegmentFault专栏：趁你还年轻，做个优秀的前端工程师Leetcode讨论微信群：Z2Fva2FpMjAxMDA4MDE=（加我微信拉你进群）

努力成为优秀前端工程师！