浏览器缓存机制

小聊浏览器缓存机制.

浏览器缓存是一个比较复杂又比较重要的机制,我们开发时候,发现页面不正常显示,可能第一个反应是不是浏览器缓存了,一般我们会ctrl+f5去强制刷新.

ctrl+f5强制刷新的过程

我们需要明白ctrl+f5强制刷新真正的工作原理是声明?

1. 这个组合键,浏览器会直接向目标url发送请求,而不会使用缓存的数据.
2. 其实即便请求发送到服务器端,也有可能访问到缓存的数据,比如我们使用了缓存代理服务器.
3. 这个组合键真正的做的是在HTTP请求头添加了几个字段.告诉服务器我们要的不是缓存的数据而是最新的.

下图是一张图片304缓存的请求头:

ctrl+f5: 强制刷新之后

对比后你会发现:

强制刷新在请求头里面添加了两个字段:
Pragma:no-cache
Cache-Control:no-cache

这两个字段什么意思呢?

Cache-Control: 该字段是可以指定所有缓存机制在整个请求与响应链中必须要服从的命令.

有如下的可选值

1. Public: 所有内容将被缓存,在响应头设置
2. Private: 内容只会缓存到私有缓存中,在响应头设置
3. no-cache: 所有内容都不会被缓存,在请求头与响应头设置
4. no-store: 所有内容都不会被缓存到缓存或者Internet临时文件,在响应头设置
5. must-revalidation/proxy-revalidation: 如果缓存的内容失效,那么请求必须发送到服务器或者代理来进行验证,在请求头设置.
6. max-age=xxx : 缓存的内容在xxx秒之后失效,这个选项只在HTTP1.1可用,和Last-Modified一起使用时候优先级更高.在响应头设置 

注意:

Cache-Control与其他一些请求字段同时出现,如Expires会覆盖其他字段.优先级更高

Pragma: 该字段与Cache-Control字段作用类似,最常用的就是Pragma: no-cache与Cache-Control: 作用一样

然后学习下其他一些常见的跟缓存相关的字段:

Expires:后面跟着一个日期和时间,表示超过这个时间值,缓存内容就会失效.所以就是说浏览器在发送请求之前会去检查这个当前页面这个字段,看页面是否过期,过期重写发起请求
常用格式: Expires: Sat,25 Feb 2012 12:22:17 GMT

Last-Modified/Etag

Last-Modified: 表示一个服务器上的资源最后修改时间,资源可以是静态的(自动加上Last-Modified字段),动态的内容(Servlet提供getLastModified方法来检查动态内容是否更新).

Last-Modified字段会在响应中返回.告诉浏览器该资源最后修改时间,浏览器再次发送请求时候,会在请求头增加一个字段If-Modified-Since字段,服务器接受请求会进行对比,决定返回304还是最新的资源.

Etag字段: 该字段作用是让服务器给每个页面分配一个唯一的编号,然后通过这个编号来区分当前页面是否是最新的.
该方法比If-Modified更灵活,缺点是当后端服务器多台的时候,要每个服务器记住网站资源的编号比较麻烦.