18.彻底理解浏览器静态资源缓存机制

先看上图，如果对图中的(a)(b)(c)(d)四个过程的处理方式都很清楚了，那么请不用再看本文了。

两个概念

·      强缓存
用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。

·      协商缓存
用户发送的请求，发送到服务器后，由服务器判定是否从缓存中获取资源。

·      两者共同点：客户端获得的数据最后都是从客户端缓存中获得。

·      两者的区别：从名字就可以看出，强缓存不与服务器交互，而协商缓存则需要与服务器交互。

四个过程详解

（a）浏览器判定是否有缓存

先理解个概念，所谓 “ 客户端缓存 ” 就是指用户设备中本地资源。不同浏览器缓存文件的地址也不尽相同。
我们以 chrome 为例来查看下浏览器缓存文件的地址，
1 ）首先在 chrome 中输入： chrome://chrome-urls/ ，看到一堆列表 , 里面隐藏了许多浏览器的奥秘，有兴趣的可以自己深扒。
2 ）找到   chrome://cache （当然也可以直接输入这个地址）

从上图中可以看到，第一个从缓存中取的文件是： https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/css/super_min_fec0412a.css

然后回到 chrome://cache 页面，找到它，并点击进去，可以看到

回到问题，浏览器怎么判定是否有缓存，就可以转化为浏览器去读取本地放缓存的地方（注：不同浏览器不同系统都会不同）是否有该对应的请求啦。

总结来说就是个查找文件是否存在的问题。

（b）缓存是否过期

我们再以这张图为例，这张图中表明，客户端保留了一个服务器端的responseheader。
里面的Date字段表明此次缓存时服务器的时间。
里面有两个字段：expires 、Cache-Control