杂谈浏览器缓存

不管是原生代码HTML/JSS/CSS还有其他静态资源，还是工具和框架jquery,vue之类，都要下载到浏览器，到浏览器就会有缓存机制

缓存就是一个就近的地方，好处是快，因为近水楼台先得月，坏处是缓存不是源头，它存放的内容和源头相比，可能已过保鲜期。过期的东西你不能再吃，会拉肚子的

强缓存，就是浏览器自己做主来决定如何使用缓存，不和服务器协商。

浏览器默认使用强缓存，以下操作会改变默认行为。

在缓存控制中，用到了Cache-Control这个重要的头信息

1当在浏览器按下F5时，浏览器会刷新，这时要向服务器请求，请求头里有：

Cache-Control: max-age=0  意思是说，哎呀，用户按了F5，不能按您的max-age来了，我设置为0了，不缓存

然后请求头了还带上：

If-Modified-Since: Sat, 09 May 2020 09:33:56 GMT 意思是说，哎呀，您给看看，我这有个时间，这个资源在这时间之后有修改没？

然后服务器返回

304 Not Modified 意思是说，哎劳资把max-age设成了好几年也挡不住你按F5啊，滚犊子，别烦我了，资源没改，你手里那份缓存就是最新的，那凉快呆哪去。当然资源就不吐了，浏览器一看得勒，就近用缓存。

2当在浏览器按下Ctl-F5时，浏览器会强制刷新，还是向服务器请求，请求头里有：

Cache-Control: max-age=0

然后请求头里没其他缓存相关的信息了

然后服务器返回

200 意思是说，哎没办法，吐资源给你了，看上去你啥也没有。浏览器这时就是只能从服务器获取资源。

If-Modified-Since的信息哪来的呢？是第一次请求时服务端给的，在头Last-Modified里。

除了Modified时间外，还有一个Etag，是服务器生成的，代表一个资源是否发生了变化的校验值。如果不一样，说明资源发生了变化，此时浏览器不可用缓存。

为什么名称叫做Etag？E代表什么？之前有个头参数名叫做Expires，是代表缓存的保鲜期到期的一个日期时间点。我猜Etag的E，是代表Expires吧

Last-Moddified代表资源的修改时间，最小时间单位是到秒

而Etag还会将资源本身内容加入做出检验值，所以Etag比Last-Modified更精确，但更慢

附2个图，可以观察一下缓存相关的头信息。第一个在浏览器里输入百度地址访问

第二个对一个图片做F5刷新