浏览器调试工具的disable cache功能，相信在座的各位都用过。开启这个功能，浏览器关于当前网站的js、css、图片...等缓存都会失效，所有请求都会重新发送给服务器。ctrl+F5也可以达到同样的效果。

下面就来说说开启这个功能的时候浏览器到底做了什么

浏览器做了什么

首先说明一下，打开disbale cache浏览器并不会去主动删除本地的这些缓存、也不会不让把请求到的资源缓存到本地。我是怎么得出这个结论的呢？

不会删除本地缓存

下面这张图左边是勾选上disbale cache的情况，右边是不勾选disbale cache的情况

当我勾选Disable cache重新加载页面后，再取消勾选Disable cache重新加载页面，会发现浏览器立即就使用缓存了，由此可以证明我上面的结论：缓存一直都在，只不过就看浏览器想不想用了。

操纵请求头

浏览器怎么可以做到这么任性的呢？原因就是它可以操纵http的请求头（request header）。

打开disbale cache，随便找一个请求看一下

http的请求头里多了cache-control，pragma这两个东西。

cache-control

cache-control这个东西大家肯定都不陌生，毕竟是http1.1的“缓存三宝”之一。它是http1.1的产物，也就是说只有http1.1及以上这个字段才有用，所以上面我们看到，浏览器又给请求头里放了个prgama，这个功能其实和cache-control一样，只不过是浏览器为了兼容http1.0，所以下面我只说cache-control。

no-cache

cache-control的值被设置成no-cache，这边大家普遍会有个误区，看这个字面意思很多人会理解成不缓存，其实这种理解是不对的、错的。

no-cache正确的理解应该是不做强缓存，但是协商缓存还是要的，浏览器的请求会发送给服务器，然后服务器验证资源是否过期，没过期的话http状态码（status code）就是304，这时浏览器会使用本地的缓存；过期的话就是200，这时浏览器会使用服务器发送过来的内容。

请求头和响应头设置的区别

cache-control可以设置在请求头和响应头（response headers），而且用法也是一样的，只不过代表的含义有些许差别。

以 cache-control: no-cache为例

设置在请求头：告诉浏览器这一次的http请求不许使用强缓存，也就是说这次请求必须给我发送到服务器。
设置在响应头：告诉浏览器这一次的http的响应内容你可以先缓存下来，但是下一次有同样请求的时候，你还是得把请求发送到服务器。

说到这里，大家应该就明白了Disable cache的时候浏览器到底搞了什么鬼。

接下去把思维发散一下

不设置会怎样？

要是请求头和响应头里都没有cache-control，浏览器会怎么做？还会不会缓存了？缓存多久？

实践出真知，去找一个符合上面条件的请求看一下，见下图

结论就是浏览器会缓存，而且还是命中的强缓存，直接从disk或者memory中读取的。

至于能缓存多久这个问题，根据百度出来的结果如下

（访问时间 - 该文件的最后修改时间） ÷ 10

这也就能解释为什么同样的请求，有时候是命中强缓存（from disk or from memory），有时候是304了。

都设置会怎样？

要是请求头和响应头都设置了cache-control，而且它们的值还设置成不同的，浏览器会怎么做呢？

有一点搞清楚这个问题就简单了，下面划重点、划重点、划重点...

cache-control 设置在请求头，影响的是这一次请求；cache-control设置在响应头，影响的是下一次请求

你品，你细品...

结语

大家有什么关于浏览器缓存机制或者http协议的问题欢迎在评论区留言讨论