注：http 缓存只能缓存 get 方式请求的资源
浏览器缓存分 强制缓存 和 协商缓存 ，分别使用的字段前者是Expires和Cach-control，后者是 Etag 和 Last-modified。
强制缓存
Expires(http/1.0)：设的是资源的过期时间（绝对时间），浏览器判断这次请求的时候是不是超过这个日期，没超的话就直接读取缓存中的资源，不向服务器发请求。
Pragma：字段值为“no-cache”的时候，会通知客户端不要对该资源读缓存，即每次都得向服务器发一次请求才行。但是这种禁用缓存的形式作用不是那么太大：1. 仅有IE才能识别这段meta标签含义，其它主流浏览器仅能识别“Cache-Control: no-store”的meta标签。2. 在IE中识别到该meta标签含义，并不一定会在请求字段加上Pragma，但的确会让当前页面每次都发新请求，但是仅限页面，页面上的资源则不受影响。
如果Pragma和Expires一起出现的话，Pragma的优先级是高的。
Cach-Control(http/1.1)：缓存控制 示例：
Cache-Control: public max-age=3600
Cache-Control: private immutable
Cache-Control: no-cache
Cache-Control: public max-age=3600 s-maxage=7200
Cache-Control: public max-age=3600 proxy-revalidate
Cache-Control 有三种属性：缓冲能力、过期时间和二次验证。
缓冲能力:
- private：表示它只应该存在本地缓存；
- public：表示它既可以存在共享缓存，也可以被存在本地缓存；
- no-cache：表示不论是本地缓存还是共享缓存，在使用它以前必须用缓存里的值来重新验证；会强制浏览器每次都直接向服务端请求，即跳过强制缓存，直接进行协商缓存。
- no-store：表示不允许被缓存，禁用一切缓存。
过期时间:
- max-age=<seconds>：设置缓存时间，设置单位为秒。本地缓存和共享缓存都可以。是相对时间， 是上次请求开始到资源过期之间的时间间隔，可以看做是设定了缓存有效期的长短，没超的话就直接读取缓存中的资源，不向服务器发请求。
- s-maxage=<seconds>：覆盖 max-age 属性。只在共享缓存中起作用。
二次验证:
- immutable：表示文档是不能更改的。
- must-revalidate：表示客户端（浏览器）必须检查代理服务器上是否存在，即使它已经本地缓存了也要检查。
- proxy-revalidata：表示共享缓存（CDN）必须要检查源是否存在，即使已经有缓存
Max-Age VS Expires
Expires使用的是服务端时间，可能出现客户端和服务端时间不同步，导致本地缓存无用或无法过期。
Max-Age使用的是客户端本地时间的计算，不会出现这个问题，推荐Max-Age。
如果同时启用了Cache-Control和Pragma ，Expires，Cache-Control优先级高。
协商缓存
Last-Modified / If- Modified-Since(http/1.0)：判断资源最后修改时间，只要这个日期改变了就不使用缓存。浏览器的头部是If- Modified-Since，服务端的是Last-Modified，如果两个匹配，代表服务器资源未改变，服务端不会返回资源实体，只返回头部，通知浏览器使用缓存。
缺点：可能有些文件会周期性地改变日期，但是内容其实没变，但是该字段只判断最后修改时间，
E-tag / If-None-Match(http/1.1)：Etag 是服务器针对请求的资源文件生成的唯一标识，只要文件内容没变化，则Etag值不变，克服了 Last-Modified / If- Modified-Since 的缺点。浏览器的头部是If-None-Match，服务端的是E-tag，如果两个匹配，代表内容未改变，通知浏览器使用缓存。
Etag 缺点：不适用于分布式系统 ，因为每个服务器上的 Etag 值不同。
如果同时带有E-tag和Last-Modified，服务端优先检查E-tag。
HTTP缓存过程详解
- 浏览器在发起请求资源前，会根据请求头字段 Expires 和 Cach-control判断是否命中强缓存，如果命中的话就直接读取本地缓存资源，不会向服务器发请求，且返回的状态码是200。
- 如果没有命中强缓存，则浏览器会发起请求，会带一些请求头字段，服务端根据这些字段来判断是否命中协商缓存。
（1）在浏览器端判断上次文件返回头中是否含有Etag信息，没有就判断（2），有则请求头带上If-None-Match字段信息发送请求给服务器，服务端判断Etag未修改则返回304，如果修改则返回200
（2）在浏览器端判断上次文件返回头中是否含有Last-Modifed信息，没有则Etag和Last-Modified都不存在，直接向服务器请求内容；有则带上If-Modified-Since字段信息发送请求，服务端判断Last-Modified失效则返回200， 有效则返回304
如何使用 http缓存
- expires, cache-control
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"/>
<meta HTTP-EQUIV="pragma" CONTENT="no-cache"/>
<meta http-equiv="expires" content="31 Dec 2008">
<meta HTTP-EQUIV="expires" CONTENT="0"/>
- 静态资源（比如CSS文件，图片等）
静态资源的缓存的设置一般都是在 web服务器上（nginx，apache）进行的
网友评论