浏览器缓存详解

· 概念：简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。至于浏览器和网站服务器是如何标识网站页面是否更新的机制，将在后面介绍。

· 报文头里的一些关键信息：

· Expires：Http1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。

· Cache-Control：Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。

· Cache-Control的属性：

· max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires

· s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于普通缓存，
而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires.

· public：响应会被缓存，并且在多用户间共享。默认是public。

· private: 响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。

· no-cache: 指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。

· no-store: 绝对禁止缓存。

· Last-modified: 表明请求的资源上次的修改时间。

· If-Modified-Since：客户端保留的资源上次的修改时间。

· Etag：资源的内容标识。（不唯一，通常为文件的md5或者一段hash值，只要保证写入和验证时的方法一致即可）

· 所以缓存的调用步骤是：
1） 查看是否有cache-control 的max-age / s-maxage , 如果有，则用服务器时间date值 + max-age/s-maxage 的秒数计算出新的过期时间，将当前时间与过期时间进行比较，判断是否过期
2）如果没有，则用expires 作为过期时间比较

· 3）如果过期了，则请求服务器，服务器接收到请求之后，通过Last-Modified和Etag判断文件是否修改过，如果没有修改过则发送一个304到客户端，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器。

· 参考资料：

· https://www.cnblogs.com/slly/p/6732749.html#undefined

· https://www.cnblogs.com/shixiaomiao1122/p/7591556.html

· https://segmentfault.com/a/1190000011212929