Open FrankKai opened 4 years ago
关于强缓存和协商缓存的理论知识和express.js下的实践,政采云前端团队的这篇文章已经非常详尽了:图解 HTTP 缓存
协商缓存可以说是一种通过访问服务器去判断是否走浏览器本地缓存的方式,在服务器资源更新时,可以使得浏览器获取到最新的资源;而强缓存是不叫简单粗暴的,直接根据过期时间进行判定
图来自图解 HTTP 缓存
刚好我最近也在对这一块的内容做补充和总结,受到这篇优质博文的启发,于是有了这篇博文。
那么在这篇博文中会看到什么呢?
强缓存:Pragma > Cache-Control > (Expires)
Pragma > Cache-Control > (Expires)
协商缓存:If-None-Match(ETag) > If-Modified-Since(Last Modified)
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,走协商缓存,返回更新后的资源。
If-Match与If-None-Match区别是什么?
代码:
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");
首次请求:
第二次请求来自强缓存:
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");
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
第二次请求:
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");
第一次请求:
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=(加我微信拉你进群)
期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:
努力成为优秀前端工程师!
关于强缓存和协商缓存的理论知识和express.js下的实践,政采云前端团队的这篇文章已经非常详尽了:图解 HTTP 缓存
什么是强缓存
什么是协商缓存
二者区别
协商缓存可以说是一种通过访问服务器去判断是否走浏览器本地缓存的方式,在服务器资源更新时,可以使得浏览器获取到最新的资源;而强缓存是不叫简单粗暴的,直接根据过期时间进行判定
强缓存和协商缓存流程图
图来自图解 HTTP 缓存
刚好我最近也在对这一块的内容做补充和总结,受到这篇优质博文的启发,于是有了这篇博文。
那么在这篇博文中会看到什么呢?
强缓存和协商缓存需要注意的细节
报文头类型
报文头优先级(圆括号为响应头)
强缓存:
Pragma > Cache-Control > (Expires)
协商缓存:
If-None-Match(ETag) > If-Modified-Since(Last Modified)
如果强缓存是新鲜的,优先强缓存。
如果强缓存是不新鲜的,判断有无协商缓存:
若资源没有更新,状态码为304走浏览器缓存;若为200,走协商缓存,返回更新后的资源。
If-Match与If-None-Match区别是什么?
HTTP 强缓存和协商缓存之 Koa 实战
Expires
代码:
首次请求:
第二次请求来自强缓存:
Cache-Control
代码:
首次请求:
第二次请求来自强缓存:
Pragma
代码:
首次请求: Pragma
第二次请求:
If-Modified-Since&&Last-Modified
代码:
第一次请求:
第二次请求:
If-None-Match&&ETag
代码:
首次请求:
第二次请求来自协商缓存: