浏览器缓存:强缓存和协商缓存

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 2017 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、http://blog.csdn.net/kikikind/article/details/6266101

2、http://blog.csdn.net/heluan123132/article/details/72885990

3、http://blog.csdn.net/lu123535884/article/details/51489951

4、http://www.cnblogs.com/slly/p/6732749.html