HTTP之强缓存和协商缓存

简介: HTTP之强缓存和协商缓存

image.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


第二次请求:


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");


首次请求:

网络异常,图片无法展示
|

第二次请求来自协商缓存:

相关文章
|
4天前
|
存储 缓存 安全
第二章 HTTP请求方法、状态码详解与缓存机制解析
第二章 HTTP请求方法、状态码详解与缓存机制解析
|
5天前
|
存储 缓存 前端开发
HTTP的缓存机制是什么?
HTTP的缓存机制是什么?
34 1
|
5天前
|
缓存
什么是强缓存和协商缓存?
什么是强缓存和协商缓存
42 0
|
5天前
|
缓存 算法
HTTP 缓存技术 - 协商缓存
HTTP 缓存技术 - 协商缓存
52 1
HTTP 缓存技术 - 协商缓存
|
5天前
|
存储 缓存 算法
HTTP 缓存技术 - 强制缓存
HTTP 缓存技术 - 强制缓存
56 0
HTTP 缓存技术 - 强制缓存
|
存储 Web App开发 缓存
彻底弄懂 HTTP 缓存机制及原理!
前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能。
167 0
彻底弄懂 HTTP 缓存机制及原理!
|
5天前
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
199 0
|
5天前
|
存储 算法 安全
[计算机网络]---Https协议
[计算机网络]---Https协议
|
5天前
|
安全 网络协议 算法
【计算机网络】http协议的原理与应用,https是如何保证安全传输的
【计算机网络】http协议的原理与应用,https是如何保证安全传输的