HTTP强缓存与协商缓存(弱缓存)

浏览器缓存的优点

浏览器将用户最近请求过的文档存储在本地磁盘,当用户再次访问时直接在本地加载,这样可以减少服务器的压力,加快用户访问网页的加载速度,提升用户体验。

浏览器缓存的过程

第一次请求:

首次响应时,服务器会把last-Modified(页面最后修改时间)和Etag一起发送给客户端。

浏览器再次请求时:

HTTP强缓存与协商缓存(弱缓存)_第1张图片

用户行为与缓存

F5刷新导致强缓存失效。
ctrl+F5强制刷新页面强缓存,弱缓存都会失效。
HTTP强缓存与协商缓存(弱缓存)_第2张图片

参数说明

Last-Modified
在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间,格式类似这样:
Last-Modified: Fri, 12 May 2006 18:53:33 GMT
客户端第二次请求此URL时,会在头部加入一个属性,询问该时间之后文件是否有被修改过:
If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT
ETag
和Last-Modified类似,由于RFC2616(也就是HTTP/1.1)中没有说明ETag该是什么格式的,只要确保用双引号括起来就行了,所以你可以用文件的hash,甚至是直接用Last-Modified,以下是服务器端返回的格式:
ETag: “50b1c1d4f775c61:df3”
客户端的查询更新格式是这样的:
If-None-Match: W/“50b1c1d4f775c61:df3”
Expires
这个属性就如我们在ASP中使用HttpResponse.ExpiresAbsolute一样直接,声明某某时刻过期之后浏览器就应该重新请求该URL,使用格式为:
Expires: Sun, 10 Feb 2002 16:00:00 GMT
注意HttpResponse.ExpiresAbsolute在ASP.NET中是不建议使用的,现在我们应该使用的是HttpResponse.Cache.SetExpires。
Pragma
通常我们用到的值就是no-cache,这和在Cache-Control中使用no-cache值是一样的,Cache-Control在下面讲。Pragma的使用格式如下:
Pragma: no-cache
Cache-Control
这是一个集合型属性,它里面能够包含很多子属性,并且允许用户扩展新的子属性。常见的子属性包括:
max-age - 以秒为单位的超时,覆盖Expires属性。
public - 允许保存在共享缓存中。
private - 只允许保存在私有缓存中。
no-cache - 不允许缓存。
no-store - 不允许缓存在持久介质中。
no-transform - 不允许转换存储系统。

最后

个人总结,有不对的地方希望大家留言指正,一起进步!
推荐一篇关于浏览器缓存总结的很不错的文章:https://juejin.im/entry/5ad86c16f265da505a77dca4

你可能感兴趣的:(前端面试)