浏览器中的缓存

在我们使用浏览器访问网页的过程中,浏览器经常会缓存各种网页中的内容。当再次访问同一个网页时,可以发现部分内容是从缓存直接读取的。
查看HTTP的响应信息,就能发现一些端倪。比如响应 200 from cache; 304 not modify 等等。
下面对浏览器使用缓存的各种情形做一下分析:

Pragma

Pragma是HTTP 1.0版本的一个参数,在HTTP 1.1版本里面这个参数也会生效,如果不想浏览器缓存网页的内容,可以在 Response header 里面加上 :Pragma: no-cache。

Cache-Control

Cache-Control是HTTP 1.1版本新增的一个参数。

Cache-Control:no-store 不允许缓存

Cache-Control:no-cache 不允许直接使用缓存,需要先发起请求和服务器协商(这个经常被误认为是不允许缓存,实际上它的作用是让浏览器在使用缓存前先请求服务端一次,确认内容是否有更新)

Cache-control: max-age=86400 表示缓存86400秒 如果你在缓存期间再次访问 并且没有设置 Cache-Control:no-cache , 就可以看到这个响应:
QQ20180325-170150@2x.png

这样的响应代表没有跟服务端进行交互,内容是直接从本地读取的。

Expires

Expires和Cache-control: max-age= 有类似的作用,都是指定缓存内容的有效周期,Expires指定的格式是格林威治时间,max-age则是秒数。

Last-Modified/If-Modified-Since

服务端也可以在 Response header 里加上 Last-Modified,它的格式是格林威治时间,再次请求时,浏览器的 Request header 中会多出一个叫 If-Modified-Since的值,通过比较这两个值是否一致来决定是否返回304。

ETag/If-None-Match

ETag的用法和 Last-Modified 类似,值是一种文件指纹。比如:ETag:"5a3ccff0-5dc"。
服务端在 Response header 里加上 ETag,再次请求时,浏览器的 Request header 中会多出一个叫 If-None-Match的值,通过比较这两个值是否一致来决定是否返回304。

总结

总体来说,浏览器使用缓存时有两种表现:
1.直接从本地读取,不与服务端有交互,就是 200 OK (from memory cache)。
2.请求一次服务端,查看本地缓存是否生效,这种方式叫 协商缓存。如果服务端判断缓存有效,将不返回完整内容,而是返回 304 Not Modified。

在优先级上 Pragma > Cache-Control > Expires。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容