从浏览器的Disable cache谈起

浏览器调试工具的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协议的问题欢迎在评论区留言讨论