前端缓存
缓存分类
1、http缓存
(1)强缓存（本地缓存）
其中，no-cache是指使用协商缓存，每次都要跟服务器验证缓存有效期，no-store是指不使用缓存。Cache-Control和Expires同时存在时，以Cache-Control为准
在network中看到下面的就是使用了硬缓存。
启发式缓存
如果max-age和expires属性都没有，找找头里的Last-Modified信息。如果有，缓存的寿命就等于头里面Date的值减去Last-Modified的值除以10（注：根据rfc2626其实也就是乘以10%）。所以，没有明确的cache-control的时候，相当于cache-control:max-age=N，也就是使用了缓存期为N的强缓存，N由Date和Last-Modified决定；如果没有Last-Modified，但是有etag，Firefox也会在请求头里加上cache-control:max-age=0，chrome虽然看不到max-age=0的参数，但实际表现也是返回304。不同的浏览器可能有不同的启发式缓存算法，所以最明智的做法就是明确设置Cache-Control。
(2)协商缓存（弱缓存）
①ETag/If-None-Match：以一个唯一标志（ETag）作为判断是否使用缓存的标准，它被称为强校验器。资源请求的响应头里含有ETag, 客户端可以在后续的请求的头中带上 If-None-Match 头来验证缓存
②Last-modify/if-Modify-Since：以时间作为判断是否使用缓存的标准，它被称为弱校验器，因为它只能精确到一秒。如果响应头里含有这个信息，客户端可以在后续的请求中带上 If-Modified-Since 来验证缓存。
Tips: Last-modify和ETag同时存在时，需要同时满足才返回304。Last-modify和ETag写在响应头中，if-Modify-Since和If-None-Match写在请求头中。
2、浏览器缓存
其他
响应头和请求头参数
其实我们在请求头和响应头里面都能看到cache-control：no-cache，那他们代表的意思有什么不一样呢。
点击查看
请求头：本次请求要怎么做
响应头：下次请求要怎么做
刷新
以谷歌浏览器为例，有正常重新加载、硬性重新加载、清空缓存并硬性重新加载三种，硬性重新加载也就是我们常说的强制刷新。
正常重新加载
平时用得最多的刷新，就是直接按F5
硬性重新加载
等同于直接按Ctrl+F5，或者在devtools的network面板中勾选Disable cache并刷新（devtools面板开启状态）。这种情况下当遇到需要加载的资源时，不会使用缓存的资源，而是重新发起请求。浏览器的处理其实就是在发出请求的时候在请求头中加上Cache-Control:no-cache和pragma: no-cache。所以也可以看出，我们的请求头是受客户端影响的，不同的客户端可能会加上不同的请求头，看到的请求头就会不一样，而响应头则是由服务器决定的，不同客户端看到的结果应该是一致的。
清空缓存并硬性重新加载
顾名思义，将该页面的缓存清空并进行硬性重新加载，那既然是硬性重新加载，清不清缓存又有什么意义呢？但实际上，页面加载后，如果是通过JS来加载内容，只是普通的硬性重新加载的话这部分的内容仍然是从缓存中加载的，清空缓存则可以保证页面内容是完全重新加载的。
调试缓存
火狐使用about:cache?storage=disk&context=
小菜鸟一枚，哪里写得不对的请赐教。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228352.html原文链接：https://javaforall.net
