目录

http缓存——强缓存

1、Expires

2、Cache-control

http缓存——协商缓存

1、Last-Modified/If-Modified-Since

2、ETag/If-Not-Match

http缓存——前端的方法

用户控制不缓存的方法

当然，无论是哪种缓存，都会有一个缺点，那就是占内存。所以在使用的时候还是要注意。

http缓存——强缓存

强缓存有两个字段：Expires、Cache-control

Expires是绝对时间，表示在一个时间点之前发起请求则直接在浏览器中获取数据

Cache-control是相对时间，表示与上一个请求之后的多少秒之内请求，则直接获取浏览器中的缓存数据

这里要注意，由于Expires是根据浏览器的系统时间来决定的，有不准确性，所以才有了Cache-control，因此Cache-control的优先级比Expires高。一般会使用Cache-control的多，但也有使用Expires的情况，那就是浏览器版本低的问题，兼容性较差则使用Expires

1、Expires

Expires:new Date("2022-12-30 23:59:59")；

2、Cache-control

我们可以使用请求头/响应头的Cache-control字段来实现强缓存

'Cache-Control':'max-age=10'

这个代码的意思是只要在第一次请求/响应返回的时候开始，如果10秒内再次请求，则会直接从缓存中读取。 

Cache-control的对应属性：

http缓存——协商缓存

 协商缓存的的字段如下：ETag\If-Not-Match、Last-Modified\If-Modified-Since

 两组字段，ETag的优先级会更高一点

1、Last-Modified/If-Modified-Since

Last-Modified是浏览器上一次缓存的时间也就是上一次服务器响应的时间；If-Modified-Since是给服务器的时间也就是第二请求时发送的时间

const data =fs.readFileSync('./img1.png')  //读取资源
const {times}=fs.statSync('./img1.png')   //读取修改时间
res.setHeader('last-modified',times.toUTCString())  //设置协商缓存
res.setHeader('Cache-control','no-cache')     //设置协商缓存

2、ETag/If-Not-Match

为了解决上面的问题，因此有了一组新的字段，从比较时间戳换成比较文字指纹，这样会更加精确点

const data =fs.readFileSync('./img1.png')  //读取资源
const etag=etag(data)   //生成唯一标识
req.headers['if-none-macth']  //获取上一次的hash

http缓存——前端的方法

前端设置静态html页面缓存方法：使用<meta>标签

// 其他浏览器识别的标签
<meta http-equiv="Cache-Control" content="max-age=7200" />


// 仅有IE浏览器才识别的标签
<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />  

静态资源缓存的方法：则是一般是在web服务器上配置的，常用的web服务器有：nginx、apache等

用户控制不缓存的方法