HTTP缓存机制（ms）

1.无缓存

最简单的就是浏览器请求一个图片，服务器找到然后返回给它。当我再请求的时候再发给我。这样就暴露了缺点：我请求的和之前一样的，你也发给我，不觉得浪费吗。优点就是简单

2.有缓存无更新

浏览器发请求，服务器返回数据，浏览器把它存在本地，当我下次需要的时候直接从本地获取。but，它的缺点：如果服务器上面这个图片更新了，我浏览器却不知道，总不能让用户清除缓存 吧！这不是很不nice吗。优点就是节约。

3.缓存+更新机制

这一次服务器返回数据的时候加一个过期时间，这样等时间到了，我就可以从服务器那再获取新的了，如果时间未到就还使用本地的。不用说缺点是什么呢：因为时间服务器发来的，假如服务器和浏览器的时间不一致呢？电脑上是2018年，服务器的是2019。优点：起码它可缓存可控制。

4.缓存+更新机制升级版

Cashe-Control: max-age=100;
复制代码

那我把过期时间做个限制吧（单位为秒），比如100秒过期，比如在100秒内，就使用本地缓存。100秒外。重新请求。一下有几个是Cashe-Control常见的几个值：

Public 表示响应可被中间节点缓存，如Browser<--proxy1<--proxy2<--Server proxy1和2 都可以缓存，比如下次请求1会把东西直接给Browser，不会向2要。

Private 表示响应不被中间节点缓存，请求的时候proxy把服务器返回的数据给浏览器，不会自己做主张把自己缓存的东西给浏览器。

no-cashe 表示不使用cashe-control的缓存控制方式做前置验证。

no-store 表示真正的不缓存任何东西

max-age=100 表示当前资源的有效时间，单位为秒。

不足吧：当100秒过了，这个图片还是之前的，没有改，还可以继续使用，这时候还会向服务器去发请求。

5.缓存+更新机制终极版

除了cashe-control，再加一个Etag（可认为是当前文件（图片）的编码）如果超过100秒重新发请求就会带上Etag，服务器收到之后把这个图片的编码和自己的图片的编码做对比，一样的话，说明图片没有什么改动，返回304状态码，告诉浏览器还是使用自己本地的缓存。和Etag功能相似的是Last-Modified/if-Modified-Since这个更好。

另外http状态码要记住的几个：200 202 301 304 403 404 500 503

转载于:https://juejin.im/post/5c515252e51d4552bf001b64