一、 强缓存与协商缓存的含义
1. 什么是缓存
我们常说的缓存，缓存一般都是根据浏览器来说的，当我们第一次访问网站的时候，程序会把网站上的图片和数据会下载到电脑上，如果我们再次访问网站的时候，网站就会从本地直接加载出来，这就是缓存。
2.浏览器缓存是什么意思
浏览器缓存是为了节约资源,并且可以加速浏览网站的速度,当用户第一次进行访问网页的时候,浏览器在用户磁盘上对请求的文档进行保存,当用户第二次访问的时候，就会从本地直接显示，从而提高了访问页面的速度。
3.什么是强缓存
服务器通过设置http中hdader的Expires和cache-control字段告诉浏览器换存的有效期。这种方法会有一个固定时间，所带来的问题是如果服务器数据进行了更新，但是还没有到强缓存的过期时间，则数据无法更新
3.1Expires
Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。
Expires的值是GMT格式的绝对时间，在设置的时间前浏览器会直接使用本地缓存。
3.2 cache-control
cache-control有12个值，其中的max-age值定义缓存的有效期，单位是秒，例如：cache-control：max-age=700，它表示缓存有效期为700秒，以消息的生成日期为基准，也就是header中的Date字段。
cache-control与Expires的区别在于cache-control的值是相对时间，而Expires是绝对时间，如果我们人为的修改了本地的时间，那么此时本地的时间与服务器上的时间不一致，就会导致缓存不能正确的被使用；而如果用相对时间，不管怎么改变本地的时间，缓存的有效期都不会改变。
4.什么是协商缓存
简单的说，协商缓存就是通过服务器来判断缓存是否可用。
4.1Last-Modified：
表示这个响应资源的最后修改时间，web服务器在响应请求时，告诉浏览器资源的最后修改时间。
If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。
4.1 Etag/If-None-Match
Etag/If-None-Match也要配合Cache-Control使用。
Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器觉得）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。
If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。
二、缓存机制
缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的，让大家有个大概的认知。
浏览器第一次请求时：
浏览器后续在进行请求时：
那么前后端具体如何实现HTTP缓存？ 看下面
1.前端如何实现HTTP缓存：
前端设置http缓存,前端设置html页面缓存方法：静态的html页面想要设置使用缓存需要通过HTTP的META设置expires和cache-control
设置如下网页元信息:
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />
解答:
cache-control：||no-cache||no-store||max-age
1.no-cache：
表面意为“数据内容不被缓存”，而实际数据是被缓存到本地的，只是每次请求时候直接绕过缓存这一环节直接向服务器请求最新资源，由于浏览器解释不一样，
例如ie中我们设置了no-cache之后，请求虽然不会直接使用缓存，但是还会用缓存数据与服务器数据进行一致性检测(也就是说还是有几率会用到缓存的),
firefox中则完全无视no-cache存在，详细解释见no-store;
2.no-store：
指示缓存不存储此次请求的响应部分。与no-cache比较来说，一个是不用缓存，一个是不存储缓存;按理来说这个设置更加粗暴直接禁用缓存，
但是具体实现起来 浏览器之间差异却特别大，一般不会直接用该字段进行设置，不过no-store是为了防止缓存被恶意修改存储路径导致信息被泄露而设置的，
毕竟有它的用处，在firefox中实现缓存是通过文件另存为将缓存副本保存到本地，直接利用no-cache对其是无效的，如果加上no-store设置的话 则可以起到与no-cache一样的效果;
即：cache-control:no-cache,no-store;可以确保在支持http1.1版本中各大浏览器回车后退刷新无缓存；
再加上Pragma: no-cache设置兼容版本1.0即可(不过为了防止一致性检测时候的万一我们还是最好加上一致性检测的内容，如下所示几种方式)；
3.max-age：
例如Cache-control: max-age=3；表示此次请求成功后3秒之内发送同样请求不会去服务器重新请求，而是使用本地缓存；同样我们如果设置max-age=0表示立即抛弃缓存直接发送请求到服务器
以下内容来自:http://www.runoob.com/tags/att-meta-http-equiv.html
HTML <meta> 标签](http://www.runoob.com/tags/tag-meta.html)
实例
每隔 30 秒刷新一次文档：
<head>
<meta http-equiv="refresh" content="30">
</head>
所有主流浏览器都支持 http-equiv 属性。
定义和用法
http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。
http-equiv 属性可用于模拟一个 HTTP 响应头。
HTML 4.01 与 HTML5之间的差异
使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式：
- HTML 4.01： <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- HTML5： <meta charset="UTF-8">
语法
<meta http-equiv="content-type|default-style|refresh">
以下场景均不能做浏览器缓存：
1.HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告诉浏览器不用缓存的请求
2.需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的
3.经过HTTPS安全加密的请求，也存在例外情况
4.POST请求无法被缓存
5.HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存
