一、http协议实现缓存 1. 缓存头部

通用缓存、条件缓存、缓存控制三大类

头部名称 说明 请求/响应

通用缓存头部 控制客户端是否向服务器发送请求或者是服务端响应请求  

cache-control 用于随报文传递的缓存提示  

pragma http1.0的，等于cache-control:no-cache，pragma优先级高于expires  

条件头部    

Last-Modified 服务器响应时将文本最后修改时间放在此头部一起传送，如：Last-Modified:GMT 响应

If-Modified-Since 客户端发送收到的last-Modified的时间，让服务器验证，资源没有修改则是304 请求

If-Unmodified-Since 若last-Modified没有匹配上，返回412（预验证失败)  

ETag 服务器响应时将文本的md5值跟随此头发送到客户端 响应

If-None-Match 告诉服务器如果没有匹配上ETag相关资源就重发，否则304  

If-Match 如果服务器没有匹配上ETag相关资源，则响应412  

     其他缓存头部 Vary | 向服务器请求时以Vary指定的字段来区分内容是否缓存了 data/age | 服务器响应时输出资源的最后响应时间（从本地缓存读取的资源不会有变化，也就是cache-control控制），而304的吃响应是有变化的

2. Vary

Vary: User-Agent, Accept-Encoding

告知服务器以User-Agent、Accept-Encoding两个头部的值区分缓存版本

3. cache-control的值说明

cache-control与expires是一致的，但expires是http1.0的东西，现代浏览器用得很少。

请求头部

max-age

max-age=0:表示跳过强制缓存，进行协商缓存

max-age= 10(>0)：客户端在指定时间内不会向服务器请求获取新的数据。

no-cache： 告知（代理）服务器不直接使用缓存，要求向服务器发起请求,始终请求会被执行

no-store: 所有内部不会被缓存或者放在浏览器临时文件夹下面

max-stale: 告知（代理）服务器 客户端愿意接收一个超过缓存时间的资源，如果设置了 值（单位：秒），max-stale:3，超过3秒的值，没有则是任意时间

min-fresh=seconds:客户端想接受一个小于seconds秒内被更新过的资源，至少在未来seconds秒内文档保持新鲜。chrome还是以max-age为准，firefox当值小于max-age时，以min-fresh为准，当值大于max-age时，直接无效

响应头部

总结

chrome浏览器对max-age>0、no-store、max-stale请求头部支持不好，完全按钮响应的max-age来控制缓存了，firefox是按照http规范实现的。

If-Unmodified-Since：不会响应412的情况

二、浏览器离线缓存

实现离线缓存的步骤：

main.appcache值说明

CACHE MANIFEST # 首次下载后需要缓存的文件 # 禁止缓存的文件 network: # 回退文件(页面无法访问时回退的页面) fallback:

事件与状态

       5.1 状态

状态值 说明

0 未缓存

1 空闲（缓存为最新状态）

2 检查中

3 下载中

4 更新就绪

5 缓存过期

      5.2 事件

事件名 说明

checking 正在检查

downloading 正在下载

updatereadey 更新完成

obsolete 缓存过期

cached 空闲，缓存为最新状态

error 缓存报错时触发的事件

noupdate 检查更新结束，没有需要更新的文件

window.applicationCache.addEventListener("cached",function(){ console.log("cached"); }); window.applicationCache.addEventListener("noupdate",function(){ console.log("noupdate"); })

注意事项
6.1 CACHE MANIFEST必须在首行，且要大写
6.2 缓存文件，浏览器直接清理缓存是无效的
6.3 修改main.appcache文件任何内容，都会导致离线缓存重新加载，包含注释信
6.4 引入main.appcache文件的html文件，会直接被离线缓存
6.5 缓存对象：window.applictionCache