1、 强缓存,不向服务器发请求,直接从本地硬盘(from disk cache/from memory cache)或者内存中获取
2、协商缓存,向服务器发出验证,如果资源无更改,不重新返回资源内容,资源内容从本地获取,,需要刷新command+r
3、如果需要从服务器直接获取,需要强制刷新,就是所谓的command+shift+r
一、强缓存
是利用HTTP响应报文中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间。
Expires:该字段是HTTP/1.0时的规范,它的值是一个绝对时间的GMT格式的时间字符串,如Expires: Mon, 06 Feb 08:26:48 GMT。这个时间代表资源的失效时间,在此之间,即命中强缓存。但是它有一个明显的缺点,当客户端与服务器时间出现较大偏差,就会出现混乱。
Cache-Control:为了解决Expires出现的问题,HTTP/1.1添加了Cache-Control。主要是利用max-age来进行判断,它是一个相对时间,如Cache-Control:max-age=600,代表着资源的有效期是600秒(10分钟)。除了max-age外,Cache-Control还有以下几个常用的值:
no-cache:不适用强缓存。需要使用缓存协商。no-store:禁止浏览器缓存,不适用强缓存和缓存协商,每次请求资源都需要发送HTTP到服务器,每次都需要下载完整的资源。public:可以被所有的用户缓存,包括客户端和CDN等中间代理服务器。private:只允许客户端缓存,不允许CDN等中间代理服务器对其缓存 Cache-Control与Expires可以在服务端配置同时启用,但是Cache-Control的优先级高于Expires 二、协商缓存 需要由服务器来确定客户端缓存资源是否可用。这主要涉及Header中两组字段:Last-Modified/If-Modified-Since或ETag/If-None-Match,这两组字段都是成对出现的。若第一次的响应头没有Last-Modified或ETag,则后续的请求头部也不会有If-Modified-Since或If-None-Match。
Last-Modified/If-Modified-Since:浏览器第一次请求一个资源的时候,服务器返回的header中会加上Last-Modified,它是一个时间标识该资源的最后修改时间。当浏览器再次请求该资源时,HTTP请求头部会带上If-Modified-Since,该值为上次响应报文头部的Last-Modified的值,服务器接收到If-Modified-Since,会根据资源的最后修改时间来判断是否命中协商缓存,如果命中,返回304(Not Modified),并且不会返回Last-Modified和无响应body。否则返回200,并且返回Last-Modified和有响应的body。
ETag/If-None-Match:它们的值不是一个时间标识,而是一个校验码。ETag可以保证每一个资源都是唯一的,资源变化都会导致ETag变化,服务器根据接收到的If-None-Match来判断是否命中协商缓存。但是当服务器返回304的时候,由于ETag重新生成过(ETag的算法,没有明确规定,可以每次生成,也可以生成后存储起来),响应头部也会带上ETag,即使它跟之前的没有变化。
为什么要有ETag?不是已经有Last-Modified吗。
一些文件或许会周期性的修改,但是它的内容没有变化(只是改变了修改时间),这个时候我们并不希望客户端认为这个文件修改了,而重新获取。某些文件在1秒内修改了N次,用If-Modified-Since无法进行区分,因为If-Modified-Since的时间最小单位是秒。某些服务器不能精确的得到文件的最后修改时间。Last-Modified和ETag可以一起使用,但是ETag的优先级大于Last-Modified,当ETag相同的情况下,才会继续比较Last-Modified,最后才决定是否返回304。
看了这么多不知道你糊涂没,下面有两张图,通过这两张图,你能对浏览器的缓存策略有一个新的认识
三、谈下浏览器缓存和CDN缓存的关系
cdn缓存就是在浏览器和服务器间增加的一层缓存,缓存一些html、图片、css、xml等静态资源。
无cdn:
用户在浏览网站的时候,浏览器能够在本地保存网站中的图片或者其他文件的副本,这样用户再次访问该网站的时候,浏览器就不用再下载全部的文件,减少了下载量意味着提高了页面加载的速度。
有cdn:
如果中间加上一层CDN,那么用户浏览器与服务器的交互如下:
客户端浏览器先检查是否有本地缓存,是否过期,如果过期,则向CDN边缘节点发起请求,CDN边缘节点会检测用户请求数据的缓存是否过期,如果没有过期,则直接响应用户请求,此时一个完成http请求结束;如果数据已经过期,那么CDN还需要向源站发出回源请求(back to the source request),来拉取最新的数据。
四、不同的浏览器操作对应的缓存操作
浏览器缓存刷新
1.在地址栏中输入网址后按回车或点击转到按钮 浏览器以最少的请求来获取网页的数据,浏览器会对所有没有过期的内容直接使用本地缓存,从而减少了对浏览器的请求。所以,Expires,max-age标记只对这种方式有效。
2.按F5或浏览器刷新按钮 浏览器会在请求中附加必要的缓存协商,但不允许浏览器直接使用本地缓存,它能够让 Last-Modified、ETag发挥效果,但是对Expires无效。
3.按Ctrl+F5或按Ctrl并点击刷新按钮 这种方式就是强制刷新,总会发起一个全新的请求,不使用任何缓存。参考: 1、/kikikind/article/details/6266101 2、/heluan123132/article/details/72885990 3、/lu123535884/article/details/51489951 4、/slly/p/6732749.html
如果觉得《浏览器缓存:强缓存和协商缓存》对你有帮助,请点赞、收藏,并留下你的观点哦!