image.png
一、缓存控制Cache-Control
-
它如何添加呢？
通过Cache-Control响应头设置max-age=xx(xx的单位是秒)； -
response.setHeader('Cache-Control','max-age=30')
意为在这个文件加载后，如果用户再次刷新页面，由于设置了response.setHeader('Cache-Control','max-age=30')，那么在30s内，客户端不再向服务器发请求下载这个文件，而是会从内存里读取；若30s过后再刷新页面，又会重新发请求下载这个文件，并再次延续30s缓存，如此往复。 - 一般，首页或html文件不要加
Cache-Control； - 如何更新缓存呢？
一般网页的文件设置的缓存事件都会很长（一年更甚者十年），那么服务器上文件更新了的话，浏览器上的文件如何更新呢？
可以注意到当浏览器以相同的URL去刷新页面时，就会调取缓存，那么就变动一下入口文件的URL，它就不会去调取缓存了；例如：
<link rel="stylesheet" href="./css/default.css?v=1">
<script src="./js/main.js?v=1"></script>
在文件后面加个?v=x，每次更新后只需把v改变一下即可；也有用随机数来改变的； - 那么缓存时间到了之后，这个文件该怎么处理呢？这时我们就要用到Etag，第一次给文件设置一个响应头
('Etag', MD5值)，第二次再去请求时，会带上一个请求头，请求头的值就是上次返回的MD5值（if-none-match:上次的MD5值），根据服务器返回的状态值来操作，304就还是用缓存，200就不要用缓存的文件，用最新的文件（这个最新的文件在相应回来的body里）；
二、 Expires
- 它也是来设置缓存时间的，不过现在都不怎么用它，都用
Cache-Control； - 它与
Cache-Control的区别：Cache-Control是设置时间长度；
Expires是设置时间点； -
Expires的一个缺点是它的时间是参照电脑本地时间的，如果本地时间错乱的话，那么缓存可能就会失效；所以如果既有Expires又有Cache-Control，那么就忽略掉Expires。 -
Last-Modified就是记录上次这个缓存文件修改的时间，下次请求的时候带上一个请求头（If-Modified-Since: 这个文件更新的时间），根据服务器返回的状态值来操作，304就还是用缓存，200就不要用缓存的文件，用最新的文件；
三、Etag
- 结合MD5（摘要算法，把一个文件算出一个字符串，文件有一丁点变化，那么下次算出的MD5值就会改变），给文件设置响应头
('Etag', MD5值)，第二次再去请求时，会带上一个请求头，请求头的值就是上次返回的MD5值（if-none-match:上次的MD5值），后台把请求的if-none-match的值跟Etag的值作比较，相同则返回304（not modified）未修改，响应体中不下载任何内容； -
cache-control与Etag的区别：
①cache-control不发请求；
②Etag有请求有响应，但是响应体是空的，不去下载内容；
https://imweb.io/topic/5795dcb6fb312541492eda8c
