一张图带你了解浏览器缓存机制

话很少说先上图

优先级

浏览器缓存优先级依次为上图的从上到下 即： service worker > Cache Control > Expires > Etag > Last-Modified

项目缓存策略

一、频繁变更的资源

Cache-Control: no-cache

对于频繁变更的资源，首先须要使用Cache-Control: no-cache 使浏览器每次都请求服务器，而后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的作法虽然不能节省请求数量，可是能显著减小响应数据大小。

二、不常变更的资源

Cache-Control: max-age=XXXXX

一般在处理这类资源时，给它们的 Cache-Control 配置一个很大的 max-age=31536000 (一年)，这样浏览器以后请求相同的 URL 会命中强制缓存。而为了解决更新的问题，就须要在文件名(或者路径)中添加 hash， 版本号等动态字符，以后更改动态字符，从而达到更改引用 URL 的目的，让以前的强制缓存失效 (其实并未当即失效，只是再也不使用了而已)。

用户行为对浏览器缓存的影响

• 打开网页，地址栏输入地址： 查找 disk cache 中是否有匹配。若有则使用；如没有则发送网络请求。
• 普通刷新 (F5)：由于 TAB 并无关闭，所以 memory cache 是可用的，会被优先使用(若是匹配的话)。其次才是 disk cache。
• 强制刷新 (Ctrl + F5)：浏览器不使用缓存，所以发送的请求头部均带有 Cache-control: no-cache(为了兼容，还带了 Pragma: no-cache),服务器直接返回 200 和最新内容。