浅谈浏览器的缓存机制

浏览器是有缓存的，做开发的同学都知道浏览器缓存是非常蛋疼的问题，特别是前端开发的同学，明明改了为什么还没有生效，经常要去清理浏览器的缓存，或者禁用浏览器的缓存功能。

我们知道在浏览器中按F5是刷新页面，CTRL+F5是强制刷新页面，这两个有什么区别呢？

F5刷新会使用浏览器的缓存。

CTRL+F5刷新是不会使用缓存的，每次请求都会请求服务器的最新资源，它的原理就是在请求头上加上一些参数告诉服务器要获取最新的资源。

当使用普通刷新时，浏览器在请求之前会检查Expires这个值，如果Expires时间小于当前时间说明缓存已经失效，重新发起获取资源。

另外，还有一个参数Last-Modified，即服务器返回的最后的修改时间，浏览器在请求时会带上If-Modified-Since这个值，服务器判断Last-Modified与If-Modified-Since是否一致，如果一致则告诉浏览器是最新的，服务器不返回新的资源。

与Last-Modified功能类似的还有一个参数：Etag，即让服务器给每个页面分配一个唯一编号，然后可以通过这个编号来确定页面是不是最新的，这个使用较少，这里不再详述。

上面为强制刷新的情况，浏览器在请求头做了以下设置：

Cache-control: no-cache

Pragma: no-cache

即表示不使用本地的缓存直接向服务器重新获取资源。

下面是关于Cache-control的参数定义：

public	所有内容都将被缓存，客户端和代理服务器都可缓存
private	内容只缓存到私有缓存中，仅客户端可以缓存，代理服务器不可缓存
no-cache	必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/ proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

Cache-control这个参数在所有浏览器中兼容性很好，而且它的优先级也比较高，和其他像Expires同时使用时会覆盖其他的字段，Pragma作用与Cache-control类似，最常用使用的是Pragma: no-cache和Cache-control结合使用告诉服务器不要使用缓存。